@bundle-stats/ui 4.16.0-beta.8 → 4.16.0

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/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/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/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/ui/tabs/index.d.ts

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

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

@@ -1,42 +1,12 @@
-export function Tabs({ className, ...restProps }: {
-    [x: string]: any;
-    className?: string | undefined;
-}): React.JSX.Element;
-export namespace Tabs {
-    export namespace defaultProps {
-        let className: string;
-    }
-    export namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-    }
-    export { Item };
-}
+import type { ComponentProps, ElementType } from 'react';
 import React from 'react';
-import PropTypes from 'prop-types';
-declare function Item({ isTabActive, as: Component, className, ...restProps }: {
-    [x: string]: any;
-    isTabActive: any;
-    as?: string | undefined;
-    className?: string | undefined;
-}): React.JSX.Element;
-declare namespace Item {
-    export namespace defaultProps_1 {
-        export let isTabActive: boolean;
-        let className_2: string;
-        export { className_2 as className };
-        export let as: string;
-    }
-    export { defaultProps_1 as defaultProps };
-    export namespace propTypes_1 {
-        let isTabActive_1: PropTypes.Requireable<boolean>;
-        export { isTabActive_1 as isTabActive };
-        let className_3: PropTypes.Requireable<string>;
-        export { className_3 as className };
-        let as_1: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export { as_1 as as };
-    }
-    export { propTypes_1 as propTypes };
-}
-export {};
+export type TabItemProps<T extends ElementType> = {
+    isTabActive?: boolean;
+    as?: T;
+} & ComponentProps<T>;
+export declare const TabItem: <T extends ElementType = "button">(props: TabItemProps<T>) => React.JSX.Element;
+export type TabsProps = ComponentProps<'div'>;
+export declare const Tabs: {
+    (props: TabsProps): React.JSX.Element;
+    Item: <T extends ElementType = "button">(props: TabItemProps<T>) => React.JSX.Element;
+};

package/src/ui/tabs/index.js

@@ -1 +0,0 @@
-export { Tabs } from './tabs';

package/src/ui/tabs/tabs.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './tabs.module.css';
-
-const Item = ({ isTabActive, as: Component = 'span', className = '', ...restProps }) => (
-  <Component className={cx(css.item, className, isTabActive && css.itemActive)} {...restProps} />
-);
-
-Item.defaultProps = {
-  isTabActive: false,
-  className: '',
-  as: 'span',
-};
-
-Item.propTypes = {
-  isTabActive: PropTypes.bool,
-  className: PropTypes.string,
-  as: PropTypes.elementType,
-};
-
-export const Tabs = ({ className = '', ...restProps }) => (
-  <nav className={cx(css.root, className)} {...restProps} />
-);
-
-Tabs.defaultProps = {
-  className: '',
-};
-
-Tabs.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Component children */
-  children: PropTypes.node.isRequired,
-};
-
-Tabs.Item = Item;