@bundle-stats/ui 4.16.0-beta.9 → 4.17.0-beta.0

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

@@ -13,12 +13,7 @@ import { useSearchParams } from '../../hooks/search-params';
 import { useEntryInfo } from '../../hooks/entry-info';
 import { getJobsChunksData } from '../../utils/jobs';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
-import {
-  addRowAssetFlags,
-  addRowIsNotPredictive,
-  getRowFilter,
-  getCustomSort,
-} from './bundle-assets.utils';
+import { addMetricReportAssetRowData, getRowFilter, getCustomSort } from './bundle-assets.utils';
 
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -50,7 +45,7 @@ export const BundleAssets = (props) => {
   });
 
   const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.assets(jobs, [addRowAssetFlags, addRowIsNotPredictive]);
+    const result = webpack.compareBySection.assets(jobs, [addMetricReportAssetRowData]);
     return { rows: result, totalRowCount: result.length };
   }, [jobs]);
 

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import {
@@ -73,8 +73,10 @@ export const BundleAssetsTotals = ({
   );
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -120,7 +122,13 @@ export const BundleAssetsTotals = ({
       </Stack>
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--totals" />}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--totals"
+          />
+        )}
       </Dialog>
     </>
   );

package/src/components/bundle-modules/bundle-modules.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { SECTIONS, COMPONENT, type Job, ReportMetricRow } from '@bundle-stats/utils';
 import escapeRegExp from 'lodash/escapeRegExp';
@@ -255,8 +255,10 @@ export const BundleModules = (props: BundleModulesProps) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState<string | undefined>(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType: string) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -374,7 +376,13 @@ export const BundleModules = (props: BundleModulesProps) => {
       )}
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--modules"/>}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--modules"
+          />
+        )}
       </Dialog>
     </>
   );

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import escapeRegExp from 'lodash/escapeRegExp';
@@ -264,8 +264,10 @@ export const BundlePackages = (props) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -338,7 +340,13 @@ export const BundlePackages = (props) => {
       )}
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--packages"/>}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--packages"
+          />
+        )}
       </Dialog>
     </>
   );

package/src/components/entry-info/entry-info.tsx

@@ -145,12 +145,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
                     </Table.Th>
                     <Table.Td className={cx(css.runsCell, css.runsColName)}>
                       {rowRun?.[runNameSelector] ? (
-                        <FlexStack
-                          space="xxxsmall"
-                          alignItems="center"
-                          as="h3"
-                          className={css.label}
-                        >
+                        <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
                           <FileName
                             as="code"
                             name={rowRun[runNameSelector]}

package/src/components/metrics-table-export/metrics-table-export.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import type { ReportMetricRow } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
-import { Tabs } from '../../ui/tabs';
+import { Tabs, TabItem } from '../../ui/tabs';
 import { PreviewSource } from '../preview-source';
 
 const generateSourceJSON = (items: Array<ReportMetricRow>): string => {
@@ -49,49 +49,58 @@ const generateSourceCSV = (items: Array<ReportMetricRow>): string => {
   return output.join('\r');
 };
 
-const SOURCES = [
-  {
+const SOURCES = {
+  csv: {
     label: 'CSV',
     transformFn: generateSourceCSV,
-    extension: 'csv',
+    extension: '.csv',
   },
-  {
+  json: {
     label: 'JSON',
     transformFn: generateSourceJSON,
-    extension: 'json',
+    extension: '.json',
   },
-];
+};
+
+const SOURCE_ENTRIES = Object.entries(SOURCES);
+const SOURCE_KEYS = Object.keys(SOURCES);
 
 type MetricsTableExportProps = {
   items: Array<ReportMetricRow>;
+  initialSourceType?: string;
   download: string;
 } & ComponentProps<typeof Stack>;
 
 export const MetricsTableExport = (props: MetricsTableExportProps) => {
-  const { items, download, ...restProps } = props;
-  const [selectedId, setSelectedId] = useState(SOURCES[0].label);
+  const { initialSourceType = SOURCE_KEYS[0], items, download, ...restProps } = props;
+  const [selectedSourceType, setSelectedSourceType] = useState(initialSourceType);
 
   return (
     <Stack space="small" {...restProps}>
       <Tabs>
-        {SOURCES.map((source) => (
-          <Tabs.Item
-            onClick={() => setSelectedId(source.label)}
-            isTabActive={selectedId === source.label}
-            key={source.label}
+        {SOURCE_ENTRIES.map(([sourceId, source]) => (
+          <TabItem
+            onClick={() => setSelectedSourceType(sourceId)}
+            isTabActive={selectedSourceType === sourceId}
+            id={`metrics-table-export-tab-${sourceId}`}
+            aria-controls={`metrics-table-export-panel-${sourceId}`}
+            key={sourceId}
           >
             {source.label}
-          </Tabs.Item>
+          </TabItem>
         ))}
       </Tabs>
       <div>
-        {SOURCES.map(
-          (source) =>
-            selectedId === source.label && (
+        {SOURCE_ENTRIES.map(
+          ([sourceId, source]) =>
+            selectedSourceType === sourceId && (
               <PreviewSource
                 source={source.transformFn(items)}
                 rows={20}
-                download={`${download}.${source.extension}`}
+                download={`${download}${source.extension}`}
+                role="tabpanel"
+                id={`metrics-table-export-panel-${sourceId}`}
+                aria-labelledby={`metrics-table-export-tab-${sourceId}`}
                 key={source.label}
               />
           ),

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

@@ -0,0 +1,5 @@
+:not(.group:empty) ~ .group {
+  margin-top: calc(var(--space-xxxsmall) / 2);
+  padding-top: calc(var(--space-xxxsmall) / 2);
+  border-top: 1px solid var(--color-outline);
+}

package/src/components/metrics-table-options/metrics-table-options.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 
 import I18N from '../../i18n';
 import { Dropdown, DropdownItem } from '../../ui/dropdown';
-import { Separator } from '../../layout/separator';
+import css from './metrics-table-options.module.css';
 
 type MetricsTableOptionsProps = {
   onViewAllClick?: () => void;
   onResetClick?: () => void;
-  onExportClick?: () => void;
+  onExportClick?: (sourceType: string) => void;
 } & ComponentProps<typeof Dropdown>;
 
 export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
@@ -16,10 +16,18 @@ export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
 
   return (
     <Dropdown glyph="more-vertical" {...restProps}>
-      {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
-      {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
-      {((onResetClick || onViewAllClick) && onExportClick) && <Separator />}
-      {onExportClick && <DropdownItem onClick={onExportClick}>{I18N.EXPORT}</DropdownItem>}
+      <div className={css.group}>
+        {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
+        {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
+      </div>
+      <div className={css.group}>
+        {onExportClick && (
+          <>
+            <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
+            <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
+          </>
+        )}
+      </div>
     </Dropdown>
   );
 };

package/src/components/metrics-treemap/metrics-treemap.utils.ts

@@ -141,7 +141,6 @@ export function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tre
     };
 
     const childrenTotal = setTreeNode(treeNodes, baseSlugs, 0, treeNode);
-    console.log(childrenTotal);
 
     total.current += childrenTotal.current;
     total.baseline =

package/src/components/preview-source/preview-source.stories.tsx

@@ -29,7 +29,19 @@ const SOURCE = JSON.stringify(
 
 export const Default: Story = {
   args: {
-    source: SOURCE,
+    source: JSON.stringify(
+      [
+        {
+          label: 'Hey',
+          runs: [
+            { value: 1, name: 'a' },
+            { value: 2, name: 'b' },
+          ],
+        },
+      ],
+      null,
+      2,
+    ),
     download: 'bundle-stats--assets.json',
   },
 };

package/src/components/preview-source/preview-source.tsx

@@ -50,7 +50,7 @@ export const PreviewSource = (props: PreviewSourceProps) => {
           )}
         </ControlGroup>
       )}
-      <Textarea readOnly rows={rows} defaultValue={source} className={css.content} />
+      <Textarea readOnly rows={rows} value={source} className={css.content} />
     </div>
   );
 };

package/src/i18n.js

@@ -22,6 +22,8 @@ export default {
   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',

package/src/stories/wrapper.jsx

@@ -1,19 +1,25 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-export const getWrapperDecorator = (customWrapperStyles = {}) => (storyFn) => {
-  const wrapperStyles = {
-    width: '100%',
-    height: '100%',
-    padding: '24px',
-    ...customWrapperStyles,
-  };
+import { QueryStateProvider } from '../query-state';
+
+export const getWrapperDecorator =
+  (customWrapperStyles = {}) =>
+  (Story) => {
+    const wrapperStyles = {
+      width: '100%',
+      height: '100%',
+      padding: '24px',
+      ...customWrapperStyles,
+    };
 
-  return (
-    <MemoryRouter initialEntries={[{ pathname: '/', key: 'home' }]}>
-      <div style={wrapperStyles}>
-        {storyFn()}
-      </div>
-    </MemoryRouter>
-  );
-};
+    return (
+      <MemoryRouter initialEntries={[{ pathname: '/', key: 'home' }]}>
+        <QueryStateProvider>
+          <div style={wrapperStyles}>
+            <Story />
+          </div>
+        </QueryStateProvider>
+      </MemoryRouter>
+    );
+  };

package/src/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReportMetricRow } from '@bundle-stats/utils';
-import type { Module } from '@bundle-stats/utils/types/webpack/types';
+import type { Asset, Module } from '@bundle-stats/utils/types/webpack/types';
 
 export interface SortAction {
   field: string;
@@ -19,6 +19,35 @@ type FilterGroupFieldData = {
 
 type FilterFieldsData = Record<string, FilterFieldData | FilterGroupFieldData>;
 
+export type ReportMetricAssetRowMetaStatus = 'added' | 'removed';
+
+export type ReportMetricAssetRow = {
+  /**
+   * Asset isEntry - at least one run has isEntry truthy
+   */
+  isEntry: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isInitial - at least one run has isInitial truthy
+   */
+  isInitial: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isChunk - at least one run has isChunk truthy
+   */
+  isChunk: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isAsset - at least one run has isAsset truthy
+   */
+  isAsset: boolean;
+  /**
+   * Asset name is not predictive
+   */
+  isNotPredictive: boolean;
+  /**
+   * Report asset row isEntry - at least one run has isEntry
+   */
+  fileType: string;
+} & Omit<ReportMetricRow, 'runs'> & { runs: Array<(Asset & ReportMetricRun) | null> };
+
 export type ReportMetricModuleRow = {
   thirdParty: boolean;
   duplicated: boolean;

package/src/ui/tabs/index.ts

@@ -0,0 +1 @@
+export * from './tabs';

package/src/ui/tabs/tabs.module.css

@@ -4,13 +4,16 @@
 }
 
 .item {
+  appearance: none;
+  background: none;
+  border: 0;
   position: relative;
   display: inline-block;
   padding: var(--space-xsmall) var(--space-small);
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
-  cursor: default;
+  transition: var(--ui-transition-out);
 }
 
 .item::after {
@@ -27,8 +30,9 @@
 .item:hover,
 .item:active,
 .item:focus {
-  color: var(--color-primary-dark);
+  color: var(--color-primary);
   outline: none;
+  transition: var(--ui-transition-out);
 }
 
 .item:hover::after,
@@ -44,7 +48,3 @@
 .itemActive::after {
   background: currentColor;
 }
-
-.item + .item {
-  _margin-left: var(--space-medium);
-}

package/src/ui/tabs/tabs.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Tabs, TabItem } from '.';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  decorators: [getWrapperDecorator()],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs>
+      <TabItem isTabActive>Option A</TabItem>
+      <TabItem>Option B</TabItem>
+      <TabItem>Option C</TabItem>
+    </Tabs>
+  ),
+};

package/src/ui/tabs/tabs.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps, ElementType } from 'react';
+import React from 'react';
+import cx from 'classnames';
+
+import css from './tabs.module.css';
+
+export type TabItemProps<T extends ElementType> = {
+  isTabActive?: boolean;
+  as?: T;
+} & ComponentProps<T>;
+
+export const TabItem = <T extends ElementType = 'button'>(props: TabItemProps<T>) => {
+  const { className = '', as: Component = 'button', isTabActive = false, ...restProps } = props;
+
+  return (
+    <Component
+      role="tab"
+      className={cx(css.item, className, isTabActive && css.itemActive)}
+      {...restProps}
+    />
+  );
+};
+
+export type TabsProps = ComponentProps<'div'>;
+
+export const Tabs = (props: TabsProps) => {
+  const { className = '', ...restProps } = props;
+
+  return <div role="tablist" className={cx(css.root, className)} {...restProps} />;
+};
+
+Tabs.Item = TabItem;

package/src/ui/tag/tag.tsx

@@ -1,16 +1,17 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import cx from 'classnames';
 
 import { KIND, SIZE } from '../../tokens';
 import css from './tag.module.css';
 
-interface TagProps {
+export type TagProps = {
   as?: React.ElementType;
   kind?: (typeof KIND)[keyof typeof KIND];
   size?: (typeof SIZE)[keyof typeof SIZE];
-}
+} & ComponentProps<'span'>;
 
-export const Tag = (props: TagProps & React.ComponentProps<'span'>) => {
+export const Tag = (props: TagProps) => {
   const {
     className = '',
     as: Component = 'span',

package/types/components/asset-meta-tag/asset-meta-tag.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TagProps } from '../../ui/tag';
+import type { ReportMetricAssetRowMetaStatus } from '../../types';
+export type AssetMetaTagProps = {
+    tag: 'entry' | 'initial' | 'chunk';
+    status: ReportMetricAssetRowMetaStatus | boolean;
+} & TagProps;
+export declare const AssetMetaTag: (props: AssetMetaTagProps) => React.JSX.Element;

package/types/components/asset-meta-tag/index.d.ts

@@ -0,0 +1 @@
+export * from './asset-meta-tag';

package/types/components/asset-name/asset-name.d.ts

@@ -0,0 +1,8 @@
+import React, { ElementType } from 'react';
+import { ReportMetricAssetRow } from '../../types';
+export type AssetNameProps = {
+    className?: string;
+    row: ReportMetricAssetRow;
+    customComponentLink: ElementType;
+};
+export declare const AssetName: (props: AssetNameProps) => React.JSX.Element;

package/types/components/asset-name/index.d.ts

@@ -0,0 +1 @@
+export * from './asset-name';

package/types/components/asset-not-predictive/asset-not-predictive.d.ts

@@ -1,8 +1,8 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import type { Asset } from '@bundle-stats/utils/types/webpack';
-interface AssetNotPredictiveProps {
+export type AssetNotPredictiveProps = {
     runs?: Array<Asset>;
     labels?: Array<string>;
-}
-export declare const AssetNotPredictive: (props: AssetNotPredictiveProps & React.ComponentProps<"div">) => React.JSX.Element;
-export {};
+} & ComponentProps<'div'>;
+export declare const AssetNotPredictive: (props: AssetNotPredictiveProps) => React.JSX.Element;

package/types/components/bundle-assets/bundle-assets.utils.d.ts

@@ -1,5 +1,5 @@
-export function addRowAssetFlags(row: any): any;
-export function getIsNotPredictive(key: any, runs: any): any;
-export function addRowIsNotPredictive(row: any): any;
+export function getIsNotPredictive(row: ReportMetricRow): boolean;
+export function getAssetMetaStatus(values: any): ReportMetricAssetRowFlagStatus | boolean;
+export function addMetricReportAssetRowData(row: ReportMetricRow): ReportMetricAssetRow;
 export function getRowFilter(filters: any): (item: any) => boolean;
 export function getCustomSort(item: any): any[];

package/types/components/metrics-table-export/metrics-table-export.d.ts

@@ -4,6 +4,7 @@ import type { ReportMetricRow } from '@bundle-stats/utils';
 import { Stack } from '../../layout/stack';
 type MetricsTableExportProps = {
     items: Array<ReportMetricRow>;
+    initialSourceType?: string;
     download: string;
 } & ComponentProps<typeof Stack>;
 export declare const MetricsTableExport: (props: MetricsTableExportProps) => React.JSX.Element;

package/types/components/metrics-table-options/metrics-table-options.d.ts

@@ -4,7 +4,7 @@ import { Dropdown } from '../../ui/dropdown';
 type MetricsTableOptionsProps = {
     onViewAllClick?: () => void;
     onResetClick?: () => void;
-    onExportClick?: () => void;
+    onExportClick?: (sourceType: string) => void;
 } & ComponentProps<typeof Dropdown>;
 export declare const MetricsTableOptions: (props: MetricsTableOptionsProps) => React.JSX.Element;
 export {};

package/types/i18n.d.ts

@@ -15,6 +15,8 @@ declare namespace _default {
     let RESET_FILTERS: string;
     let VIEW_ALL: string;
     let EXPORT: string;
+    let EXPORT_CSV: string;
+    let EXPORT_JSON: string;
     let COPY_TO_CLIPBOARD: string;
     let COPY_TO_CLIPBOARD_DONE: string;
     let GITHUB_LINK_TITLE: string;

package/types/stories/wrapper.d.ts

@@ -1,2 +1,2 @@
-export function getWrapperDecorator(customWrapperStyles?: {}): (storyFn: any) => React.JSX.Element;
+export function getWrapperDecorator(customWrapperStyles?: {}): (Story: any) => React.JSX.Element;
 import React from 'react';

package/types/ui/tabs/index.d.ts

@@ -1 +1 @@
-export { Tabs } from "./tabs";
+export * from './tabs';