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

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: 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

@@ -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';
@@ -16,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';

package/src/ui/textarea/textarea.module.css

@@ -0,0 +1,64 @@
+.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);
+}
+
+/**
+ * Source variation
+ */
+.previewSource {
+  font-family: var(--font-family-fixed);
+}
+
+/** 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/src/ui/textarea/textarea.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Textarea } from '.';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'UI/Textarea',
+  component: Textarea,
+  args: {
+    placeholder: 'Enter value',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const SizeSmall: Story = {
+  args: {
+    size: 'small',
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+    defaultValue: 'Lorem ipsum dolor sit amed',
+  },
+};
+export const PreviewSource: Story = {
+  args: {
+    previewSource: true,
+    rows: 6,
+    defaultValue: JSON.stringify(ReadOnly, null, 2),
+  },
+};

package/src/ui/textarea/textarea.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+import cx from 'classnames';
+
+import css from './textarea.module.css';
+
+export type TextareaProps = {
+  previewSource?: boolean;
+  size?: 'small' | 'medium' | 'large';
+} & ComponentProps<'textarea'>;
+
+export const Textarea = (props: TextareaProps) => {
+  const { className = '', previewSource = false, size = '', ...restProps } = props;
+
+  const rootClassName = cx(
+    css.root,
+    previewSource && css.previewSource,
+    size && css[size],
+    className,
+  );
+
+  return <textarea className={rootClassName} {...restProps} />;
+};

package/types/components/metrics-table-export/index.d.ts

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

package/types/components/metrics-table-export/metrics-table-export.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+import type { ReportMetricRow } from '@bundle-stats/utils';
+import { Stack } from '../../layout/stack';
+type MetricsTableExportProps = {
+    items: Array<ReportMetricRow>;
+    download: string;
+} & ComponentProps<typeof Stack>;
+export declare const MetricsTableExport: (props: MetricsTableExportProps) => React.JSX.Element;
+export {};

package/types/components/metrics-table-options/index.d.ts

@@ -1 +1 @@
-export * from "./metrics-table-options";
+export * from './metrics-table-options';

package/types/components/metrics-table-options/metrics-table-options.d.ts

@@ -1,18 +1,10 @@
-export function MetricsTableOptions(props: any): React.JSX.Element;
-export namespace MetricsTableOptions {
-    namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let handleViewAll: PropTypes.Requireable<(...args: any[]) => any>;
-        let handleResetFilters: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    namespace defaultProps {
-        let className_1: string;
-        export { className_1 as className };
-        let handleViewAll_1: null;
-        export { handleViewAll_1 as handleViewAll };
-        let handleResetFilters_1: null;
-        export { handleResetFilters_1 as handleResetFilters };
-    }
-}
+import type { ComponentProps } from 'react';
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Dropdown } from '../../ui/dropdown';
+type MetricsTableOptionsProps = {
+    onViewAllClick?: () => void;
+    onResetClick?: () => void;
+    onExportClick?: () => void;
+} & ComponentProps<typeof Dropdown>;
+export declare const MetricsTableOptions: (props: MetricsTableOptionsProps) => React.JSX.Element;
+export {};

package/types/components/preview-source/index.d.ts

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

package/types/components/preview-source/preview-source.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+type PreviewSourceProps = {
+    source: string;
+    download?: string;
+} & ComponentProps<'div'>;
+export declare const PreviewSource: (props: PreviewSourceProps) => React.JSX.Element;
+export {};

package/types/i18n.d.ts

@@ -14,6 +14,9 @@ declare namespace _default {
     let PACKAGES_INFO: string;
     let RESET_FILTERS: string;
     let VIEW_ALL: string;
+    let EXPORT: string;
+    let COPY_TO_CLIPBOARD: string;
+    let COPY_TO_CLIPBOARD_DONE: string;
     let GITHUB_LINK_TITLE: string;
     let REPORT_ISSUE: string;
     let REPORT_ISSUE_LINK_TITLE: string;

package/types/ui/button/button.d.ts

@@ -13,6 +13,32 @@ export declare const BUTTON_KIND: {
     readonly INFO: "info";
     readonly SUCCES: "success";
 };
+export declare const BUTTON_GLYPHS: {
+    readonly ARROW: "arrow";
+    readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
+    readonly CANCEL: "close";
+    readonly CHEVRON_DOWN: "chevron-down";
+    readonly CHEVRON_UP: "chevron-up";
+    readonly CHECK: "check";
+    readonly CLOSE: "close";
+    readonly CLOCK: "clock";
+    readonly COMMIT: "commit";
+    readonly CLIPBOARD: "clipboard";
+    readonly CLIPBOARD_CHECK: "clipboard-check";
+    readonly DOWNLOAD: "download";
+    readonly ERROR: "error";
+    readonly EXTERNAL_LINK: "external-link";
+    readonly FILTER: "filter";
+    readonly GITHUB: "github";
+    readonly INFO: "info";
+    readonly HELP: "help";
+    readonly TABLE: "table";
+    readonly TREEMAP: "treemap";
+    readonly MENU: "menu";
+    readonly MORE_VERTICAL: "more-vertical";
+    readonly SORT: "sort";
+    readonly WARNING: "warning";
+};
 type Size = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
 type Kind = (typeof BUTTON_KIND)[keyof typeof BUTTON_KIND];
 interface ButtonProps<T extends React.ElementType> {

package/types/ui/dialog/dialog.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, ReactNode } from 'react';
+import React from 'react';
+import { Dialog as AriakitDialog } from 'ariakit/dialog';
+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 declare const Dialog: (props: DialogProps) => React.JSX.Element;

package/types/ui/dialog/index.d.ts

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

package/types/ui/icon/icon.d.ts

@@ -11,6 +11,7 @@ declare const ICONS: {
     readonly COMMIT: "commit";
     readonly CLIPBOARD: "clipboard";
     readonly CLIPBOARD_CHECK: "clipboard-check";
+    readonly DOWNLOAD: "download";
     readonly ERROR: "error";
     readonly EXTERNAL_LINK: "external-link";
     readonly FILTER: "filter";
@@ -49,6 +50,7 @@ export declare const Icon: {
         readonly COMMIT: "commit";
         readonly CLIPBOARD: "clipboard";
         readonly CLIPBOARD_CHECK: "clipboard-check";
+        readonly DOWNLOAD: "download";
         readonly ERROR: "error";
         readonly EXTERNAL_LINK: "external-link";
         readonly FILTER: "filter";

package/types/ui/index.d.ts

@@ -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";
@@ -16,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/types/ui/tabs/tabs.d.ts

@@ -1,6 +1,6 @@
 export function Tabs({ className, ...restProps }: {
     [x: string]: any;
-    className: any;
+    className?: string | undefined;
 }): React.JSX.Element;
 export namespace Tabs {
     export namespace defaultProps {
@@ -18,8 +18,8 @@ import PropTypes from 'prop-types';
 declare function Item({ isTabActive, as: Component, className, ...restProps }: {
     [x: string]: any;
     isTabActive: any;
-    as: any;
-    className: any;
+    as?: string | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 declare namespace Item {
     export namespace defaultProps_1 {

package/types/ui/textarea/index.d.ts

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

package/types/ui/textarea/textarea.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+export type TextareaProps = {
+    previewSource?: boolean;
+    size?: 'small' | 'medium' | 'large';
+} & ComponentProps<'textarea'>;
+export declare const Textarea: (props: TextareaProps) => React.JSX.Element;