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

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,40 @@
+.root {
+  position: relative;
+}
+
+.toolbar {
+  position: absolute;
+  z-index: 2;
+  top: var(--space-xsmall);
+  right: var(--space-xsmall);
+  background: var(--color-background);
+  border-radius: var(--radius-medium);
+}
+
+/** 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;
+}
+
+/** Source content */
+.content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  background: var(--color-highlight);
+  color: var(--color-text);
+  font-family: var(--font-family-fixed);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--color-highlight);
+}

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

@@ -0,0 +1,53 @@
+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: JSON.stringify(
+      [
+        {
+          label: 'Hey',
+          runs: [
+            { value: 1, name: 'a' },
+            { value: 2, name: 'b' },
+          ],
+        },
+      ],
+      null,
+      2,
+    ),
+    download: 'bundle-stats--assets.json',
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    download: 'bundle-stats--assets.json',
+  },
+};

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

@@ -0,0 +1,56 @@
+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';
+
+const DEFAULT_ROWS = 10;
+
+type PreviewSourceProps = {
+  source?: string;
+  /**
+   * Textarea rows
+   */
+  rows?: number;
+  /**
+   * Link download attribute
+   * @example
+   *   bundle-stats--assets.json
+   */
+  download?: string;
+} & ComponentProps<'div'>;
+
+export const PreviewSource = (props: PreviewSourceProps) => {
+  const { className = '', source, rows = DEFAULT_ROWS, download = false, ...restProps } = props;
+
+  const isEmpty = !source;
+  const rootClassName = cx(css.root, className, isEmpty && css.isEmpty);
+
+  return (
+    <div className={rootClassName} {...restProps}>
+      {source && (
+        <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 readOnly rows={rows} value={source} className={css.content} />
+    </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;
@@ -200,6 +201,10 @@
 
   --outline-hover: 0 0 0 var(--space-xxxsmall) var(--color-highlight);
 
+  --skeleton-inline-background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
+  --skeleton-block-background: currentColor;
+  --skeleton-opacity: 0.06;
+
   /** Layout */
   --max-width: 88rem;
   --entry-info-width: 64rem;

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

@@ -1,58 +1,15 @@
 .root {
-  padding: var(--space-xxxsmall);
-}
-
-.wrapper {
-  display: flex;
-  gap: var(--space-xxsmall);
-  align-items: center;
-}
-
-.content {
-  flex: 1 1 auto;
   white-space: nowrap;
-  line-height: 1.1;
-}
-
-.icon {
-  flex: 0 0 auto;
-  position: relative;
-  width: var(--space-small);
-  height: var(--space-small);
-}
-
-.iconCopy,
-.iconDone {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.iconCopy {
-  color: var(--color-text-ultra-light);
-}
-
-.iconDone {
-  color: var(--color-success);
+  /** override tooltip styles */
+  color: var(--color-text-ultra-light) !important;
 }
 
 /** done state */
-.iconCopy {
-  opacity: 1;
-  transition: var(--ui-transition-out);
-}
-
-.iconDone {
-  opacity: 0;
+.root svg {
   transition: var(--ui-transition-out);
 }
 
-.done .iconCopy {
-  opacity: 0;
-  transition: var(--ui-transition-in);
-}
-
-.done .iconDone {
-  opacity: 1;
+.done svg {
+  color: var(--color-success);
   transition: var(--ui-transition-in);
 }

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

@@ -3,6 +3,7 @@ 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';
@@ -38,20 +39,15 @@ export const CopyToClipboard = (props: CopyToClipboardProps) => {
 
   return (
     <Tooltip
-      title={doneTimeout ? 'Copied' : 'Copy to clipboard'}
+      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}
     >
-      <span className={css.wrapper}>
-        {children && <span className={css.content}>{children}</span>}
-        <span className={css.icon}>
-          <Icon className={css.iconCopy} glyph={Icon.ICONS.CLIPBOARD} />
-          <Icon className={css.iconDone} glyph={Icon.ICONS.CLIPBOARD_CHECK} />
-        </span>
-      </span>
+      {children}
     </Tooltip>
   );
 };

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: 360px;
+}
+
+.width--medium {
+  max-width: 640px;
+}
+
+.width--wide {
+  max-width: 1024px;
+}
+
+.width--extra-wide {
+  max-width: calc(var(--max-width) + 2 * var(--space-medium));
+}
+
+/** 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

@@ -15,6 +15,7 @@ const ICONS = {
   COMMIT: 'commit',
   CLIPBOARD: 'clipboard',
   CLIPBOARD_CHECK: 'clipboard-check',
+  DOWNLOAD: 'download',
   ERROR: 'error',
   EXTERNAL_LINK: 'external-link',
   FILTER: 'filter',

package/src/ui/index.js

@@ -3,6 +3,7 @@ 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';
@@ -12,8 +13,10 @@ export { Icon } from './icon';
 export { Input } from './input';
 export { InputSearch } from './input-search';
 export { Loader } from './loader';
+export { Markdown } from './markdown';
 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/markdown/index.ts

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

package/src/ui/markdown/markdown.module.css

@@ -0,0 +1,7 @@
+.root code {
+  padding: 2px var(--space-xxxsmall);
+  background: var(--color-highlight);
+  outline: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  color: var(--color-text);
+}

package/src/ui/markdown/markdown.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Markdown } from '.';
+
+const meta: Meta<typeof Markdown> = {
+  title: 'UI/Markdown',
+  component: Markdown,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: '**One line** _markdown_ content',
+  },
+};
+
+const MULTI_LINE_MARKDOWN = `
+**Lorem ipsum** dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et malesuada.
+
+Eget nunc scelerisque viverra mauris in. Ipsum dolor sit amet consectetur adipiscing.
+`;
+
+export const MultiLine: Story = {
+  args: {
+    content: MULTI_LINE_MARKDOWN,
+  },
+};

package/src/ui/markdown/markdown.tsx

@@ -0,0 +1,24 @@
+import React, { ComponentProps, ElementType, useMemo } from 'react';
+import cx from 'classnames';
+import snarkdown from 'snarkdown';
+
+import css from './markdown.module.css';
+
+type MarkdownProps = {
+  content?: string;
+  as?: ElementType;
+} & ComponentProps<'div'>;
+
+export const Markdown = (props: MarkdownProps) => {
+  const { className = '', content = '', as: Component = 'div', ...restProps } = props;
+
+  const html = useMemo(() => snarkdown(content), [content]);
+
+  return (
+    <Component
+      className={cx(css.root, className)}
+      {...restProps}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};

package/src/ui/skeleton/skeleton.module.css

@@ -1,6 +1,6 @@
 .root {
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.05;
+  background: var(--skeleton-inline-background);
+  opacity: var(--skeleton-opacity);
   pointer-events: none;
   min-width: 6em;
   border-radius: var(--radius-medium);
@@ -14,5 +14,5 @@
 }
 
 .block {
-  background: currentColor;
+  background: var(--skeleton-block-background);
 }

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/tabs/tabs.module.css

@@ -10,6 +10,7 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
+  cursor: default;
 }
 
 .item::after {