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

package/lib-esm/ui/textarea/textarea.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import cx from 'classnames';
+import css from './textarea.module.css';
+export const Textarea = (props) => {
+    const { className = '', size = '', ...restProps } = props;
+    const rootClassName = cx(css.root, size && css[size], className);
+    return React.createElement("textarea", { className: rootClassName, ...restProps });
+};
+//# sourceMappingURL=textarea.js.map

package/lib-esm/ui/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/ui/textarea/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAMxC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;IAEjE,OAAO,kCAAU,SAAS,EAAE,aAAa,KAAM,SAAS,GAAI,CAAC;AAC/D,CAAC,CAAC"}

package/lib-esm/ui/textarea/textarea.module.css

@@ -0,0 +1,57 @@
+.root {
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  color: var(--color-text-light);
+  width: 100%;
+  resize: vertical;
+  transition: var(--transition-in);
+  appearance: none;
+  outline: none;
+}
+
+.root::-webkit-input-placeholder {
+  color: var(--color-text-light);
+}
+
+.root::-moz-placeholder {
+  color: var(--color-text-light);
+}
+
+.root:-ms-input-placeholder {
+  color: var(--color-text-light);
+}
+
+.root:-moz-placeholder {
+  color: var(--color-text-light);
+}
+
+.root:focus {
+  box-shadow: var(--outline-hover);
+  border-color: var(--color-outline-dark);
+  color: inherit;
+  transition: var(--transition-out);
+}
+
+.root[readonly=""] {
+  color: var(--color-text-light);
+}
+
+/** Size modifier */
+/* default - medium */
+.root {
+  padding: var(--space-xsmall);
+  font-size: var(--size-medium);
+  line-height: calc(var(--space-medium) - 2px);
+}
+
+.small {
+  padding: var(--space-xxsmall);
+  font-size: var(--size-small);
+  line-height: calc(var(--space-small) - 2px);
+}
+
+.large {
+  padding: var(--space-small);
+  font-size: var(--size-large);
+  line-height: calc(var(--space-large) - 2px);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.16.0-beta.0",
+  "version": "4.16.0-beta.10",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,15 +36,15 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.25.4",
-    "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "7.24.7",
-    "@storybook/addon-essentials": "8.3.3",
+    "@babel/preset-env": "7.25.7",
+    "@babel/preset-react": "7.25.7",
+    "@babel/preset-typescript": "7.25.7",
+    "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-    "@storybook/react": "8.3.3",
-    "@storybook/react-webpack5": "8.3.3",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-webpack5": "8.3.5",
     "@types/d3": "7.4.3",
-    "@types/react": "18.3.9",
+    "@types/react": "18.3.11",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
@@ -61,7 +61,7 @@
     "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
     "rimraf": "6.0.1",
-    "storybook": "8.3.3",
+    "storybook": "8.3.5",
     "typescript": "5.6.2",
     "typescript-plugin-css-modules": "5.1.0"
   },
@@ -74,12 +74,13 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.16.0-beta.0",
+    "@bundle-stats/utils": "^4.16.0-beta.10",
     "ariakit": "2.0.0-next.44",
-    "d3": "^7.8.5",
+    "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
-    "react-use": "^17.5.0",
+    "react-use": "17.5.1",
+    "snarkdown": "2.0.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "c91877e9966bd0602b57f48bc3f91e6e0fdb7ff3"
+  "gitHead": "cb616111c85f4b0d28e4b049fe3f6c7b0d7551d7"
 }

package/src/assets/icons/download.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
+  <path d="M0 0h24v24H0z" fill="none"/>
+  <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"/>
+</svg>

package/src/assets/icons.svg

@@ -22,7 +22,7 @@
 <symbol fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" id="clipboard-check" xmlns="http://www.w3.org/2000/svg">
 <rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>
 <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
-<path d="m9.277 15.145 2 2 4-4" />
+<path d="m9.277 15.145 2 2 4-4"/>
 </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"/>
@@ -36,6 +36,10 @@
 <circle cx="12" cy="12" r="4"/>
 <path d="M1.05 12H7M17.01 12h5.95"/>
 </symbol>
+<symbol fill="currentColor" viewBox="0 0 24 24" id="download" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"/>
+</symbol>
 <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="error" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 8v4M12 16h.01"/>
@@ -79,3 +83,4 @@
 <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/>
 </symbol>
 </svg>
+

package/src/assets/icons.svg.jsx

@@ -129,6 +129,15 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="4" />
       <path d="M1.05 12H7M17.01 12h5.95" />
     </symbol>
+    <symbol
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      id="download"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" />
+    </symbol>
     <symbol
       fill="none"
       stroke="currentColor"

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';
@@ -50,10 +52,10 @@ const DISPLAY_TYPE_GROUPS = {
 
 const getFileTypeFilters = (filters) =>
   Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
-    key,
-    label,
-    defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
-  }));
+  key,
+  label,
+  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
+}));
 
 const getFilters = ({ compareMode, filters }) => ({
   [ASSET_FILTERS.CHANGED]: {
@@ -62,7 +64,7 @@ const getFilters = ({ compareMode, filters }) => ({
     disabled: !compareMode,
   },
   [ASSET_ENTRY_TYPE]: {
-    label: 'Entry type',
+    label: 'Type',
     children: [
       {
         key: ASSET_FILTERS.ENTRY,
@@ -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/insights/insights.module.css

@@ -4,6 +4,7 @@
 
 .entry {
   color: inherit;
+  line-height: var(--line-height-heading);
   text-decoration: none;
 }
 

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.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,102 @@
+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';
+
+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>
+        {SOURCES.map(
+          (source) =>
+            selectedId === source.label && (
+              <PreviewSource
+                source={source.transformFn(items)}
+                rows={20}
+                download={`${download}.${source.extension}`}
+                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 = {};