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

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

@@ -19,6 +19,7 @@ import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
+import { Dialog, useDialogState } from '../../ui/dialog';
 import { Icon } from '../../ui/icon';
 import { InputSearch } from '../../ui/input-search';
 import { FileName } from '../../ui/file-name';
@@ -32,6 +33,7 @@ import { AssetInfo } from '../asset-info';
 import { AssetNotPredictive } from '../asset-not-predictive';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
@@ -313,6 +315,12 @@ export const BundleAssets = (props) => {
     return allItems.find(({ key }) => key === entryId);
   }, [allItems, entryId]);
 
+  const exportDialog = useDialogState();
+
+  const handleExportClick = useCallback(() => {
+    exportDialog.toggle();
+  }, []);
+
   return (
     <>
       <Stack space="xsmall" as="section" className={cx(css.root, className)}>
@@ -326,8 +334,9 @@ export const BundleAssets = (props) => {
                 onSelect={setDisplayType}
               />
               <MetricsTableOptions
-                handleViewAll={resetAllFilters}
-                handleResetFilters={resetFilters}
+                onViewAllClick={resetAllFilters}
+                onResetClick={resetFilters}
+                onExportClick={handleExportClick}
               />
             </FlexStack>
           )}
@@ -385,6 +394,10 @@ export const BundleAssets = (props) => {
           onClose={hideEntryInfo}
         />
       )}
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--assets"/>}
+      </Dialog>
     </>
   );
 };

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

@@ -15,12 +15,16 @@ import { Toolbar } from '../../ui/toolbar';
 import { Table } from '../../ui/table';
 import { Box } from '../../layout/box';
 import { Stack } from '../../layout/stack';
+import { Dialog, useDialogState } from '../../ui/dialog';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTable } from '../metrics-table';
-import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableHeader } from '../metrics-table-header';
+import { MetricsTableOptions } from '../metrics-table-options';
+import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsTreemap, getTreemapNodes } from '../metrics-treemap';
 import { ComponentLink } from '../component-link';
+import { FlexStack } from '../../layout';
 
 const metricsTableTitle = (
   <MetricsTableTitle
@@ -68,42 +72,57 @@ export const BundleAssetsTotals = ({
     [history],
   );
 
+  const exportDialog = useDialogState();
+
+  const handleExportClick = useCallback(() => {
+    exportDialog.toggle();
+  }, []);
+
   return (
-    <Stack space="xsmall" as="section" className={className}>
-      <Toolbar
-        renderActions={() => (
-          <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} />
-        )}
-      />
-      <Box outline as="main">
-        {displayType.value === MetricsDisplayType.TABLE && (
-          <MetricsTable
-            title={metricsTableTitle}
-            runs={jobs}
-            items={items}
-            renderRowHeader={renderRowHeader}
-            showHeaderSum
-            {...restProps}
-          />
-        )}
-        {displayType.value === MetricsDisplayType.TREEMAP && (
-          <>
-            <Table compact>
-              <MetricsTableHeader
-                metricTitle={metricsTableTitle}
-                showSum
-                jobs={jobs}
-                rows={items}
-              />
-            </Table>
-            <MetricsTreemap
-              treeNodes={getTreemapNodes(items)}
-              onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+    <>
+      <Stack space="xsmall" as="section" className={className}>
+        <Toolbar
+          renderActions={() => (
+            <FlexStack space="xxsmall">
+              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} />
+              <MetricsTableOptions onExportClick={handleExportClick} />
+            </FlexStack>
+          )}
+        />
+        <Box outline as="main">
+          {displayType.value === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              title={metricsTableTitle}
+              runs={jobs}
+              items={items}
+              renderRowHeader={renderRowHeader}
+              showHeaderSum
+              {...restProps}
             />
-          </>
-        )}
-      </Box>
-    </Stack>
+          )}
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap
+                treeNodes={getTreemapNodes(items)}
+                onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+              />
+            </>
+          )}
+        </Box>
+      </Stack>
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--totals" />}
+      </Dialog>
+    </>
   );
 };
 

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

@@ -13,6 +13,7 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Button } from '../../ui/button';
 import { ControlGroup } from '../../ui/control-group';
+import { Dialog, useDialogState } from '../../ui/dialog';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
@@ -23,6 +24,7 @@ import { Toolbar } from '../../ui/toolbar';
 import { Tooltip } from '../../ui/tooltip';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
 import { MetricsTableOptions } from '../metrics-table-options';
@@ -252,6 +254,12 @@ export const BundleModules = (props: BundleModulesProps) => {
     return allItems.find(({ key }) => key === entryId);
   }, [allItems, entryId]);
 
+  const exportDialog = useDialogState();
+
+  const handleExportClick = useCallback(() => {
+    exportDialog.toggle();
+  }, []);
+
   return (
     <>
       <Stack space="xsmall" as="section" className={rootClassName}>
@@ -266,8 +274,9 @@ export const BundleModules = (props: BundleModulesProps) => {
                 groups={DISPLAY_TYPE_GROUPS}
               />
               <MetricsTableOptions
-                handleViewAll={resetAllFilters}
-                handleResetFilters={resetFilters}
+                onViewAllClick={resetAllFilters}
+                onResetClick={resetFilters}
+                onExportClick={handleExportClick}
               />
             </FlexStack>
           )}
@@ -363,6 +372,10 @@ export const BundleModules = (props: BundleModulesProps) => {
           onClose={hideEntryInfo}
         />
       )}
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--modules"/>}
+      </Dialog>
     </>
   );
 };

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

@@ -9,6 +9,7 @@ import I18N from '../../i18n';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
+import { Dialog, useDialogState } from '../../ui/dialog';
 import { InputSearch } from '../../ui/input-search';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
@@ -17,6 +18,7 @@ import { Table } from '../../ui/table';
 import { Toolbar } from '../../ui/toolbar';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
@@ -261,6 +263,12 @@ export const BundlePackages = (props) => {
     return allItems.find(({ key }) => key === entryId)
   }, [allItems, entryId]);
 
+  const exportDialog = useDialogState();
+
+  const handleExportClick = useCallback(() => {
+    exportDialog.toggle();
+  }, []);
+
   return (
     <>
       <Stack space="xsmall" as="section" className={cx(css.root, className)}>
@@ -270,8 +278,9 @@ export const BundlePackages = (props) => {
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
               <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} groupBy={displayType.groupBy} groups={DISPLAY_TYPE_GROUPS} />
               <MetricsTableOptions
-                handleViewAll={resetAllFilters}
-                handleResetFilters={resetFilters}
+                onViewAllClick={resetAllFilters}
+                onResetClick={resetFilters}
+                onExportClick={handleExportClick}
               />
             </FlexStack>
           )}
@@ -327,6 +336,10 @@ export const BundlePackages = (props) => {
           onClose={hideEntryInfo}
         />
       )}
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--packages"/>}
+      </Dialog>
     </>
   );
 };

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

@@ -105,7 +105,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
         <Stack space="small">
           <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.label}>
             <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
-            <CopyToClipboard text={item.label} />
+            <CopyToClipboard text={item.label} size="small" />
           </FlexStack>
           <div>{renderRunInfo(item)}</div>
         </Stack>
@@ -156,7 +156,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
                             name={rowRun[runNameSelector]}
                             className={css.fileName}
                           />
-                          <CopyToClipboard text={item.label} />
+                          <CopyToClipboard text={item.label} size="small" />
                         </FlexStack>
                       ) : (
                         '-'

package/src/components/metrics-table-export/index.ts

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

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

@@ -0,0 +1,8 @@
+.panels {
+}
+
+.panel {
+  min-height: 320px;
+  height: 60vh;
+  max-height: 480px;
+}

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { MetricsTableExport } from '.';
+
+const meta: Meta<typeof MetricsTableExport> = {
+  title: 'Components/MetricsTableExport',
+  component: MetricsTableExport,
+  decorators: [getWrapperDecorator()],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ITEMS = [
+  {
+    label: 'Hey',
+    runs: [
+      { value: 1, name: 'a' },
+      { value: 2, name: 'b' },
+    ],
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: ITEMS,
+  },
+};

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

@@ -0,0 +1,103 @@
+import type { ComponentProps } from 'react';
+import React, { useState } from 'react';
+import type { ReportMetricRow } from '@bundle-stats/utils';
+
+import { Stack } from '../../layout/stack';
+import { Tabs } from '../../ui/tabs';
+import { PreviewSource } from '../preview-source';
+import css from './metrics-table-export.module.css';
+
+const generateSourceJSON = (items: Array<ReportMetricRow>): string => {
+  const output = items.map((item) => ({
+    name: item.label,
+    runs: item.runs?.map((itemRun) => ({
+      name: itemRun?.name || '',
+      size: itemRun?.value || 0,
+    })),
+  }));
+
+  return JSON.stringify(output, null, 2);
+};
+
+const CSV_SEPARATOR = ', ';
+
+const generateSourceCSV = (items: Array<ReportMetricRow>): string => {
+  const output = [];
+
+  output.push(
+    [
+      'Name',
+      ...(items?.[0]?.runs?.map((_, index) => {
+        if (index === 0) {
+          return `Run ${index + 1}(current)`;
+        }
+
+        return `Run ${index + 1}(baseline)`;
+      }) || []),
+    ].join(CSV_SEPARATOR),
+  );
+
+  items?.forEach((item) => {
+    const row: Array<string | number> = [item.label];
+
+    item.runs?.forEach((itemRun) => {
+      row.push(itemRun?.value || 0);
+    });
+
+    output.push(row.join(CSV_SEPARATOR));
+  });
+
+  return output.join('\r');
+};
+
+const SOURCES = [
+  {
+    label: 'CSV',
+    transformFn: generateSourceCSV,
+    extension: '.csv',
+  },
+  {
+    label: 'JSON',
+    transformFn: generateSourceJSON,
+    extension: '.json',
+  },
+];
+
+type MetricsTableExportProps = {
+  items: Array<ReportMetricRow>;
+  download: string;
+} & ComponentProps<typeof Stack>;
+
+export const MetricsTableExport = (props: MetricsTableExportProps) => {
+  const { items, download, ...restProps } = props;
+  const [selectedId, setSelectedId] = useState(SOURCES[0].label);
+
+  return (
+    <Stack space="small" {...restProps}>
+      <Tabs>
+        {SOURCES.map((source) => (
+          <Tabs.Item
+            onClick={() => setSelectedId(source.label)}
+            isTabActive={selectedId === source.label}
+            key={source.label}
+          >
+            {source.label}
+          </Tabs.Item>
+        ))}
+      </Tabs>
+      <div className={css.panels}>
+        {SOURCES.map(
+          (source) =>
+            selectedId === source.label && (
+              <PreviewSource
+                source={source.transformFn(items)}
+                download={`${download}.${source.extension}`}
+                className={css.panel}
+                key={source.label}
+              />
+          ),
+        )}
+      </div>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { action } from '@storybook/addon-actions';
+
+import { getWrapperDecorator } from '../../stories';
+import { MetricsTableOptions } from '.';
+
+const meta: Meta<typeof MetricsTableOptions> = {
+  title: 'Components/MetricsTableOptions',
+  component: MetricsTableOptions,
+  decorators: [getWrapperDecorator()],
+  args: {
+    onResetClick: action('RESET'),
+    onViewAllClick: action('VIEW_ALL'),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,25 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import I18N from '../../i18n';
+import { Dropdown, DropdownItem } from '../../ui/dropdown';
+import { Separator } from '../../layout/separator';
+
+type MetricsTableOptionsProps = {
+  onViewAllClick?: () => void;
+  onResetClick?: () => void;
+  onExportClick?: () => void;
+} & ComponentProps<typeof Dropdown>;
+
+export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
+  const { onViewAllClick, onResetClick, onExportClick, ...restProps } = props;
+
+  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>}
+    </Dropdown>
+  );
+};

package/src/components/preview-source/index.ts

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

package/src/components/preview-source/preview-source.module.css

@@ -0,0 +1,28 @@
+.root {
+  position: relative;
+}
+
+.toolbar {
+  position: absolute;
+  z-index: 2;
+  top: var(--space-xsmall);
+  right: var(--space-xsmall);
+}
+
+/** fix control group with nested components */
+.downloadTooltip > a {
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.downloadTooltip > a:hover,
+.downloadTooltip > a:active,
+.downloadTooltip > a:focus {
+  box-shadow: none;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { PreviewSource } from '.';
+
+const meta: Meta<typeof PreviewSource> = {
+  title: 'Components/PreviewSource',
+  component: PreviewSource,
+  decorators: [getWrapperDecorator()],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const SOURCE = JSON.stringify(
+  [
+    {
+      label: 'Hey',
+      runs: [
+        { value: 1, name: 'a' },
+        { value: 2, name: 'b' },
+      ],
+    },
+  ],
+  null,
+  2,
+);
+
+export const Default: Story = {
+  args: {
+    source: SOURCE,
+    download: 'bundle-stats--assets.json',
+  },
+};

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

@@ -0,0 +1,47 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+import cx from 'classnames';
+
+import { Button, BUTTON_GLYPHS } from '../../ui/button';
+import { CopyToClipboard } from '../../ui/copy-to-clipboard';
+import { ControlGroup } from '../../ui/control-group';
+import { Tooltip } from '../../ui/tooltip';
+import { Textarea } from '../../ui/textarea';
+import css from './preview-source.module.css';
+
+type PreviewSourceProps = {
+  source: string;
+  /**
+   * Link download attribute
+   * @example
+   *   bundle-stats--assets.json
+   */
+  download?: string;
+} & ComponentProps<'div'>;
+
+export const PreviewSource = (props: PreviewSourceProps) => {
+  const { className = '', source, download = false, ...restProps } = props;
+
+  return (
+    <div className={cx(css.root, className)} {...restProps}>
+      <ControlGroup className={css.toolbar}>
+        <CopyToClipboard outline size="small" text={source} />
+        {download && (
+          <Tooltip title={`Download ${download}`} className={css.downloadTooltip}>
+            <Button
+              outline
+              rightGlyph={BUTTON_GLYPHS.DOWNLOAD}
+              size="small"
+              as="a"
+              href={`data:application/json,${encodeURIComponent(source)}`}
+              download={download}
+            />
+          </Tooltip>
+        )}
+      </ControlGroup>
+      <Textarea previewSource readOnly rows={12} className={css.content}>
+        {source}
+      </Textarea>
+    </div>
+  );
+};

package/src/css/variables.css

@@ -176,6 +176,7 @@
   --color-outline-warning: var(--color-yellow-200);
   --color-outline-danger: var(--color-red-100);
 
+  --color-backdrop: rgba(0, 0, 0, 0.05);
   --color-shadow: rgba(0, 0, 0, 0.2);
 
   --transition-duration-in: 0.2s;

package/src/i18n.js

@@ -21,6 +21,10 @@ export default {
 
   RESET_FILTERS: 'Reset filters',
   VIEW_ALL: 'View all entries',
+  EXPORT: 'Export',
+
+  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',

package/src/ui/button/button.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import cx from 'classnames';
 import { Button as ButtonBaseComponent } from 'ariakit/button';
 
@@ -21,6 +20,8 @@ export const BUTTON_KIND = {
   SUCCES: 'success',
 } as const;
 
+export const BUTTON_GLYPHS = BaseIcon.ICONS;
+
 type Size = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
 type Kind = (typeof BUTTON_KIND)[keyof typeof BUTTON_KIND];