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

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];
 

package/src/ui/copy-to-clipboard/copy-to-clipboard.module.css

@@ -0,0 +1,15 @@
+.root {
+  white-space: nowrap;
+  /** override tooltip styles */
+  color: var(--color-text-ultra-light) !important;
+}
+
+/** done state */
+.root svg {
+  transition: var(--ui-transition-out);
+}
+
+.done svg {
+  color: var(--color-success);
+  transition: var(--ui-transition-in);
+}

package/src/ui/copy-to-clipboard/copy-to-clipboard.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CopyToClipboard } from '.';
+
+const meta: Meta<typeof CopyToClipboard> = {
+  title: 'UI/CopyToClipboard',
+  component: CopyToClipboard,
+};
+
+export default meta;
+
+type Story = StoryObj<Meta>;
+
+export const Default: Story = {
+  args: {
+    text: 'Lorem ipsum dolor sit amd',
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    ...Default.args,
+    children: Default.args?.text,
+    outline: true,
+    size: 'small',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    ...Default.args,
+    outline: true,
+  },
+};

package/src/ui/copy-to-clipboard/copy-to-clipboard.tsx

@@ -0,0 +1,53 @@
+import type { ComponentProps } from 'react';
+import React, { useCallback, useState } from 'react';
+import cx from 'classnames';
+import { useCopyToClipboard } from 'react-use';
+
+import I18N from '../../i18n';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { Tooltip } from '../tooltip';
+import css from './copy-to-clipboard.module.css';
+
+export type CopyToClipboardProps = {
+  /**
+   * Text to copy to clipboard
+   */
+  text: string;
+} & ComponentProps<typeof Button>;
+
+export const CopyToClipboard = (props: CopyToClipboardProps) => {
+  const { className = '', children, text, ...restProps } = props;
+
+  const [, copyToClipboard] = useCopyToClipboard();
+  const [doneTimeout, setDoneTimeout] = useState<ReturnType<typeof setTimeout> | null>();
+
+  const handleOnClick = useCallback(() => {
+    if (doneTimeout) {
+      clearTimeout(doneTimeout);
+      setDoneTimeout(null);
+    }
+
+    setDoneTimeout(null);
+    copyToClipboard(text);
+
+    const done = setTimeout(() => setDoneTimeout(null), 2000);
+    setDoneTimeout(done);
+  }, [text, doneTimeout, setDoneTimeout]);
+
+  const rootClassName = cx(css.root, className, doneTimeout && css.done);
+
+  return (
+    <Tooltip
+      title={doneTimeout ? I18N.COPY_TO_CLIPBOARD_DONE : I18N.COPY_TO_CLIPBOARD}
+      as={Button}
+      type="button"
+      rightGlyph={doneTimeout ? Icon.ICONS.CLIPBOARD_CHECK : Icon.ICONS.CLIPBOARD}
+      onClick={handleOnClick}
+      className={rootClassName}
+      {...restProps}
+    >
+      {children}
+    </Tooltip>
+  );
+};

package/src/ui/copy-to-clipboard/index.ts

@@ -0,0 +1 @@
+export * from './copy-to-clipboard';

package/src/ui/dialog/dialog.module.css

@@ -0,0 +1,89 @@
+.backdrop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999 !important;
+}
+
+.backdrop::before {
+  content: ' ';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-backdrop);
+  filter:
+}
+
+.dialog {
+  --dialog-header-height: var(--space-medium);
+  --dialog-vspace: var(--space-xsmall);
+  --dialog-padding: var(--space-xsmall);
+
+  width: calc(100vw - 2 * var(--dialog-padding));
+  position: relative;
+  border-radius: var(--radius-medium);
+  padding: var(--dialog-padding);
+  background: var(--color-background);
+  box-shadow: 0 0 var(--space-medium) var(--color-shadow);
+}
+
+.header {
+  min-height: var(--dialog-header-height);
+}
+
+.header:empty {
+  display: none;
+}
+
+.headerClose {
+  position: absolute;
+  right: var(--space-xxsmall);
+  top: var(--space-xxsmall);
+  padding: var(--space-xxxsmall);
+  flex: 0 0 auto;
+  color: var(--color-outline-dark);
+}
+
+.headerClose:hover,
+.headerClose:focus,
+.headerClose:active {
+  color: var(--color-text-ultra-light);
+}
+
+.content {
+  width: 100%;
+  max-height: calc(100vh - 2 * var(--space-medium) - 2 * var(--dialog-padding) - var(--dialog-header-height) - var(--dialog-vspace));
+  padding-bottom: 0.3em; /* extra space to compensate for the title line-height and allow to show focus state correctly on buttons */
+  overflow: auto;
+}
+
+/** Width variation */
+.width--narrow {
+  max-width: 480px;
+}
+
+.width--medium {
+  max-width: 748px;
+}
+
+.width--wide {
+  max-width: 1024px;
+}
+
+.width--extra-wide {
+  max-width: var(--max-width);
+}
+
+/** Center variation */
+.center {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .dialog {
+    --dialog-vspace: var(--space-medium);
+    --dialog-padding: var(--space-large);
+  }
+}

package/src/ui/dialog/dialog.stories.tsx

@@ -0,0 +1,67 @@
+import React, { Fragment } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Dropdown, DropdownItem } from '../dropdown';
+import { Button } from '../button';
+import { Dialog, useDialogState } from '.';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'UI/Dialog',
+  component: Dialog,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: function DefaultDialog() {
+    const dialog = useDialogState();
+
+    return (
+      <>
+        <Button type="button" onClick={dialog.toggle}>
+          Open
+        </Button>
+        <Dialog title="Title" state={dialog}>
+          <div style={{ maxWidth: 480 }}>
+            <Dropdown label="Select option">
+              <DropdownItem>Option 1</DropdownItem>
+              <DropdownItem>Option 2</DropdownItem>
+              <DropdownItem>Option 3</DropdownItem>
+            </Dropdown>
+            <br />
+            <br />
+            {[1, 2, 3].map((item) => (
+              <Fragment key={item}>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, lectus
+                  vitae tristique facilisis, quam ex vulputate risus, vitae mattis eros diam quis
+                  velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
+                  ac turpis egestas. Sed et velit tortor. Suspendisse risus ipsum, convallis
+                  ultricies justo vel, auctor semper est. Sed viverra pulvinar odio eget pharetra.
+                  In eleifend felis nec odio convallis, eleifend rhoncus diam maximus. Cras diam
+                  libero, egestas blandit vestibulum nec, volutpat a mi. Etiam blandit turpis ac
+                  nulla molestie vehicula. Duis bibendum a nisl sollicitudin lobortis. Vestibulum
+                  lobortis eget justo ac elementum. Vestibulum vel lorem arcu. Etiam sagittis luctus
+                  justo eu interdum. Ut lobortis tempus turpis, vitae auctor elit congue id.
+                </p>
+                <br />
+                <p>
+                  Nulla eu ullamcorper quam. Mauris rhoncus tristique dui in rutrum. Ut eget justo a
+                  lorem efficitur consequat. Nunc sed erat at ipsum convallis iaculis at ac lacus.
+                  Etiam pellentesque felis quis maximus ultrices. Vivamus non pretium quam. Aenean
+                  vel nunc fringilla, lacinia felis a, vehicula purus. Vestibulum in varius purus.
+                  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+                  himenaeos. Quisque laoreet ultrices ligula eget iaculis. Vivamus lacinia ante
+                  mattis lorem ultricies consequat. Integer dui odio, semper ac neque vitae,
+                  elementum hendrerit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                </p>
+              </Fragment>
+            ))}
+          </div>
+        </Dialog>
+      </>
+    );
+  },
+};

package/src/ui/dialog/dialog.tsx

@@ -0,0 +1,62 @@
+import type { ComponentProps, ReactNode } from 'react';
+import React from 'react';
+import cx from 'classnames';
+import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss } from 'ariakit/dialog';
+
+import { Stack } from '../../layout/stack';
+import { BUTTON_GLYPHS, Button } from '../button';
+import css from './dialog.module.css';
+
+export { useDialogState } from 'ariakit/dialog';
+
+type AriakitDialogProps = ComponentProps<typeof AriakitDialog>;
+
+type DialogProps = {
+  title?: ReactNode;
+  width?: 'narrow' | 'medium' | 'wide' | 'extra-wide';
+  center?: boolean;
+  modal?: AriakitDialogProps['modal'];
+  state: AriakitDialogProps['state'];
+} & Omit<ComponentProps<'div'>, 'title'>;
+
+export const Dialog = (props: DialogProps) => {
+  const {
+    state,
+    className = '',
+    title = '',
+    width = 'medium',
+    center = false,
+    modal = false,
+    children,
+  } = props;
+
+  const rootClassName = cx(css.dialog, width && css[`width--${width}`], center && css.center);
+
+  return (
+    <AriakitDialog
+      state={state}
+      modal={modal}
+      backdrop
+      backdropProps={{
+        className: css.backdrop,
+      }}
+      portal
+      className={rootClassName}
+    >
+      {!modal && (
+        <AriakitDialogDismiss as={Button} glyph={BUTTON_GLYPHS.CLOSE} className={css.headerClose}>
+          {/* null content to prevent DialogDismiss to render the default "x" */}
+          {null}
+        </AriakitDialogDismiss>
+      )}
+      <Stack space="medium">
+        {title && (
+          <header className={css.header}>
+            {typeof title === 'string' ? <h2>{title}</h2> : title}
+          </header>
+        )}
+        <div className={cx(css.content, className)}>{children}</div>
+      </Stack>
+    </AriakitDialog>
+  );
+};

package/src/ui/dialog/index.ts

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

package/src/ui/icon/icon.tsx

@@ -13,6 +13,9 @@ const ICONS = {
   CLOSE: 'close',
   CLOCK: 'clock',
   COMMIT: 'commit',
+  CLIPBOARD: 'clipboard',
+  CLIPBOARD_CHECK: 'clipboard-check',
+  DOWNLOAD: 'download',
   ERROR: 'error',
   EXTERNAL_LINK: 'external-link',
   FILTER: 'filter',

package/src/ui/index.js

@@ -1,7 +1,9 @@
 export { Alert } from './alert';
 export { Button } from './button';
+export { CopyToClipboard } from './copy-to-clipboard';
 export { Container } from './container';
 export { ControlGroup } from './control-group';
+export { Dialog } from './dialog';
 export { Dropdown } from './dropdown';
 export { EmptySet } from './empty-set';
 export { FileName } from './file-name';
@@ -15,4 +17,5 @@ export { Skeleton } from './skeleton';
 export { Table } from './table';
 export { Tabs } from './tabs';
 export { Tag } from './tag';
+export { Textarea } from './textarea';
 export { Tooltip } from './tooltip';

package/src/ui/tabs/tabs.jsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 import css from './tabs.module.css';
 
-const Item = ({ isTabActive, as: Component, className,...restProps }) => (
+const Item = ({ isTabActive, as: Component = 'span', className = '', ...restProps }) => (
   <Component className={cx(css.item, className, isTabActive && css.itemActive)} {...restProps} />
 );
 
@@ -20,7 +20,7 @@ Item.propTypes = {
   as: PropTypes.elementType,
 };
 
-export const Tabs = ({ className, ...restProps }) => (
+export const Tabs = ({ className = '', ...restProps }) => (
   <nav className={cx(css.root, className)} {...restProps} />
 );
 

package/src/ui/textarea/index.ts

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