@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

package/src/ui/control-group/control-group.module.css

@@ -0,0 +1,23 @@
+.root > *:not(:first-child) {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+
+  margin-left: -1px;
+}
+
+.root > *:not(:last-child) {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.root > * {
+  position: relative;
+  z-index: 0;
+}
+
+.root > *:hover,
+.root > *:active,
+.root > *:focus {
+  z-index: 1;
+  box-shadow: none;
+}

package/src/ui/control-group/control-group.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+
+import { Button } from '../button';
+import { ControlGroup } from '.';
+
+export default {
+  title: 'UI/ControlGroup',
+  component: ControlGroup,
+} as Meta;
+
+export const Default = () => (
+  <ControlGroup>
+    <Button outline type="button">
+      Option A
+    </Button>
+    <Button outline type="button">
+      Option B
+    </Button>
+    <Button outline type="button">
+      Option C
+    </Button>
+  </ControlGroup>
+);

package/src/ui/control-group/control-group.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { FlexStack } from '../../layout/flex-stack';
+import css from './control-group.module.css';
+
+export const ControlGroup = (props: React.ComponentProps<typeof FlexStack>) => {
+  const { className = '', ...restProps } = props;
+  return (
+    <FlexStack
+      className={cx(css.root, className)}
+      space="no-space"
+      alignItems="center"
+      {...restProps}
+    />
+  );
+};

package/src/ui/control-group/index.ts

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

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,93 @@
+.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;
+}
+
+.headerTitle {
+  font-weight: bold;
+}
+
+.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: 640px;
+}
+
+.width--wide {
+  max-width: 960px;
+}
+
+.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,78 @@
+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,
+  argTypes: {
+    width: {
+      control: {
+        type: 'select',
+      },
+      options: ['narrow', 'medium', 'wide', 'extra-wide'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const DialogComponent = (storyArgs: Story['args']) => {
+  const { width } = storyArgs;
+  const dialog = useDialogState();
+
+  return (
+    <>
+      <Button type="button" onClick={dialog.toggle}>
+        Open
+      </Button>
+      <Dialog title="Title" state={dialog} width={width}>
+        <div>
+          <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>
+    </>
+  );
+};
+
+export const Default: Story = {
+  render: (storyArgs) => <DialogComponent {...storyArgs} />,
+};

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 className={css.headerTitle}>{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/dropdown/dropdown.module.css

@@ -1,44 +1,21 @@
-.root {
-  display: inline-block;
-}
-
 .button {
-  background: none;
-  border: none;
-  padding: 0;
-
-  border: 1px solid var(--color-outline);
-  border-radius: var(--radius-small);
-  padding: calc(var(--space-xxsmall) - 1px);
-
-  background: none;
-  font-size: var(--size-small);
-  line-height: var(--space-small);
   white-space: nowrap;
-  appearance: none;
-  cursor: pointer;
-  color: var(--color-text-light);
 }
 
-.button[aria-expanded=true],
-.button:hover,
-.button:focus,
-.button:active {
-  outline: none;
-  box-shadow: var(--outline-hover);
-  color: var(--color-text);
+.button[disabled] {
+  color: var(--color-text-ultra-light);
 }
 
 .dropdown {
   position: absolute;
   left: 0;
   top: 100%;
-  border-radius: var(--radius-medium);
-  box-shadow: var(--shadow-layer-high);
+  border-radius: var(--radius-small);
+  box-shadow: var(--shadow-layer);
   background: var(--color-background);
   min-width: 12em;
   z-index: var(--layer-high);
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) / 2);
 }
 
 .dropdown:focus {
@@ -48,18 +25,18 @@
 .item {
   display: block;
   appearance: none;
-  cursor: pointer;
   width: 100%;
   outline: none;
   border: 0;
   border-radius: var(--radius-small);
-  padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
+  padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
   background: none;
   text-align: left;
   color: var(--color-text-light);
   font-size: var(--size-small);
   line-height: inherit;
   text-decoration: none;
+  cursor: default;
 }
 
 .item[data-active-item],

package/src/ui/dropdown/dropdown.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Dropdown, DropdownItem } from '.';
+
+export default {
+  title: 'UI/Dropdown',
+  component: Dropdown,
+  decorators: [getWrapperDecorator()],
+} as Meta;
+
+export const Defualt = () => (
+  <Dropdown glyph="filter" label="Toggle">
+    <DropdownItem>Option 1</DropdownItem>
+    <DropdownItem>Option 2</DropdownItem>
+  </Dropdown>
+);
+
+export const Disabled = () => (
+  <Dropdown glyph="filter" label="Toggle" disabled>
+    <DropdownItem>Option 1</DropdownItem>
+    <DropdownItem>Option 2</DropdownItem>
+  </Dropdown>
+);

package/src/ui/dropdown/dropdown.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import cx from 'classnames';
+import { Menu, MenuButton, MenuItem, MenuStateProps, useMenuState } from 'ariakit/menu';
+
+import { Button, BUTTON_SIZE } from '../button';
+import css from './dropdown.module.css';
+
+interface DropdownItemProps {
+  isActive?: boolean;
+}
+
+export const DropdownItem = (props: DropdownItemProps & React.ComponentProps<typeof MenuItem>) => {
+  const { className = '', isActive = false, ...restProps } = props;
+
+  return (
+    <MenuItem className={cx(css.item, className, isActive && css.itemActive)} {...restProps} />
+  );
+};
+
+interface DropdownProps {
+  dropdownClassName?: string;
+  label?: React.ReactNode;
+  ariaLabel?: string;
+  glyph?: string;
+  disabled?: boolean;
+  placement?: MenuStateProps['placement'];
+  gutter?: MenuStateProps['gutter'];
+  shift?: MenuStateProps['shift'];
+}
+
+export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    dropdownClassName = '',
+    label = null,
+    ariaLabel = '',
+    glyph = '',
+    disabled = false,
+    placement,
+    gutter = 4,
+    shift,
+    children,
+  } = props;
+
+  const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
+  const menuState = useMenuState({ placement, gutter, shift });
+
+  return (
+    <>
+      <MenuButton
+        as={Button}
+        outline
+        size={BUTTON_SIZE.SMALL}
+        glyph={glyph}
+        disabled={disabled}
+        state={menuState}
+        tabIndex={null}
+        className={cx(css.button, className)}
+      >
+        {label}
+      </MenuButton>
+      <Menu
+        portal
+        state={menuState}
+        aria-label={dropdownAriaLabel}
+        className={cx(css.dropdown, dropdownClassName)}
+      >
+        {children}
+      </Menu>
+    </>
+  );
+};

package/src/ui/empty-set/empty-set.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Stack } from '../../layout/stack';
 import I18N from '../../i18n';
+import { Stack } from '../../layout/stack';
+import { Button } from '../button';
 import css from './empty-set.module.css';
 
 export const EmptySet = (props) => {
@@ -12,16 +13,16 @@ export const EmptySet = (props) => {
   const actions = [
     ...(handleResetFilters
       ? [
-          <button className={css.action} type="button" onClick={handleResetFilters}>
+          <Button kind="primary" type="button" onClick={handleResetFilters} className={css.action}>
             {I18N.RESET_FILTERS}
-          </button>,
+          </Button>,
         ]
       : []),
     ...(handleViewAll
       ? [
-          <button className={css.action} type="button" onClick={handleViewAll}>
+          <Button kind="primary" type="button" onClick={handleViewAll} className={css.action}>
             {I18N.VIEW_ALL}
-          </button>,
+          </Button>,
         ]
       : []),
   ];

package/src/ui/empty-set/empty-set.module.css

@@ -1,20 +1,3 @@
 .root {
   color: var(--color-text-light);
 }
-
-.action {
-  appearance: none;
-  padding: 0;
-  background: none;
-  border: none;
-  color: var(--color-primary);
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.action:focus,
-.action:active,
-.action:hover {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}

package/src/ui/file-name/file-name.jsx

@@ -24,5 +24,5 @@ FileName.propTypes = {
   as: PropTypes.elementType,
 
   /** File name source  */
-  name: PropTypes.string,
+  name: PropTypes.string | PropTypes.node,
 };

package/src/ui/file-name/file-name.module.css

@@ -6,4 +6,6 @@
   word-break: break-word;
   hyphens: auto;
   white-space: normal;
+  max-height: calc(2em * var(--line-height));
+  overflow: hidden;
 }