@ultraviolet/ui 1.0.0

package/dist/src/components/Tag/index.js

@@ -0,0 +1,177 @@
+import _styled from '@emotion/styled/base';
+import useClipboard from 'react-use-clipboard';
+import { Button } from '../Button/index.js';
+import { Icon } from '../Icon/index.js';
+import { Loader } from '../Loader/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const COPY_DURATION = 2500;
+const StyledContainer = /*#__PURE__*/_styled('span', {
+  shouldForwardProp: prop => !['sentiment', 'copiable'].includes(prop),
+  target: "el6733p2"
+})("display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.radii.default;
+}, ";padding:0 ", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['1'];
+}, ";gap:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['1'];
+}, ";width:fit-content;height:24px;", _ref4 => {
+  let {
+    copiable,
+    theme
+  } = _ref4;
+  return copiable && `
+    &:hover, &:active {
+      cursor: pointer;
+      background: ${theme.colors.neutral.backgroundWeakHover};
+      border-color: ${theme.colors.neutral.borderStrongHover};
+    }
+
+    &:active {
+      box-shadow: ${theme.shadows.focusNeutral};
+    }
+  `;
+}, " ", _ref5 => {
+  let {
+    sentiment,
+    theme
+  } = _ref5;
+  if (sentiment === 'disabled') {
+    return `
+      color: ${theme.colors.neutral.textDisabled};
+      background: ${theme.colors.neutral.backgroundDisabled};
+      border: solid 1px ${theme.colors.neutral.borderDisabled};
+      cursor: not-allowed
+
+    `;
+  }
+  if (sentiment === 'neutral') {
+    return `
+      color: ${theme.colors.neutral.text};
+      background: ${theme.colors.neutral.background};
+      border: solid 1px ${theme.colors.neutral.border};
+    `;
+  }
+  return `
+      color: ${theme.colors[sentiment].text};
+      background: ${theme.colors[sentiment].background};
+      border: solid 1px ${theme.colors[sentiment].background};
+    `;
+}, ";");
+const StyledTag = /*#__PURE__*/_styled("span", {
+  target: "el6733p1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "td7tdt",
+  styles: "font-size:12px;font-weight:500;color:inherit;max-width:232px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis"
+} : {
+  name: "td7tdt",
+  styles: "font-size:12px;font-weight:500;color:inherit;max-width:232px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledCloseButton = /*#__PURE__*/_styled(Button, {
+  target: "el6733p0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1z1k76",
+  styles: "width:fit-content;height:fit-content;padding:2px"
+} : {
+  name: "1z1k76",
+  styles: "width:fit-content;height:fit-content;padding:2px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const TagInner = _ref6 => {
+  let {
+    children,
+    isLoading = false,
+    onClose,
+    icon,
+    disabled = false
+  } = _ref6;
+  return jsxs(Fragment, {
+    children: [icon ? jsx(Icon, {
+      name: icon,
+      size: 16
+    }) : null, jsx(StyledTag, {
+      "aria-disabled": disabled,
+      children: children
+    }), onClose && !isLoading ? jsx(StyledCloseButton, {
+      onClick: onClose,
+      disabled: disabled,
+      "aria-label": "Close tag",
+      "data-testid": "close-tag",
+      variant: "ghost",
+      sentiment: "neutral",
+      icon: "close",
+      size: "small"
+    }) : null, isLoading ? jsx(Loader, {
+      active: true,
+      size: 16
+    }) : null]
+  });
+};
+const Tag = _ref7 => {
+  let {
+    children,
+    isLoading,
+    onClose,
+    icon,
+    copiable = false,
+    copyText = 'Copy',
+    copiedText = 'Copied!',
+    disabled,
+    sentiment = 'neutral',
+    className,
+    'data-testid': dataTestId
+  } = _ref7;
+  const [isCopied, setCopied] = useClipboard(typeof children === 'string' ? children : '', {
+    successDuration: COPY_DURATION
+  });
+  if (copiable && !disabled) {
+    const Container = StyledContainer.withComponent('button', {
+      target: "el6733p3"
+    });
+    return jsx(Tooltip, {
+      text: isCopied ? copiedText : copyText,
+      children: jsx(Container
+      // @note: sending disabled as a special sentiment is a bit weird
+      , {
+        sentiment: disabled ? 'disabled' : sentiment,
+        copiable: true,
+        onClick: setCopied,
+        className: className,
+        "data-testid": dataTestId,
+        children: jsx(TagInner, {
+          isLoading: isLoading,
+          onClose: onClose,
+          icon: icon,
+          disabled: disabled,
+          children: children
+        })
+      })
+    });
+  }
+  return jsx(StyledContainer, {
+    sentiment: disabled ? 'disabled' : sentiment,
+    className: className,
+    "data-testid": dataTestId,
+    children: jsx(TagInner, {
+      isLoading: isLoading,
+      onClose: onClose,
+      icon: icon,
+      disabled: disabled,
+      children: children
+    })
+  });
+};
+
+export { Tag };

package/dist/src/components/TagInput/index.js

@@ -0,0 +1,277 @@
+import _styled from '@emotion/styled/base';
+import { useState, useEffect, useRef } from 'react';
+import { Tag } from '../Tag/index.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { getUUID } from '../../utils/ids.js';
+
+const STATUS = {
+  IDLE: 'idle',
+  LOADING: 'loading'
+};
+const variants = {
+  base: _ref => {
+    let {
+      theme: {
+        colors,
+        shadows,
+        radii
+      }
+    } = _ref;
+    return `
+    padding: 8px;
+    cursor: text;
+    border-radius: ${radii.default};
+    border: 1px solid ${colors.neutral.borderWeak};
+    &:focus-within {
+      border: 1px solid ${colors.primary.borderWeak};
+      box-shadow: ${shadows.focusPrimary};
+    }
+
+    &:hover {
+      border: 1px solid ${colors.primary.borderWeak};
+    }
+
+    & > * {
+      margin: 6px;
+    }
+  `;
+  },
+  bordered: _ref2 => {
+    let {
+      theme: {
+        shadows
+      }
+    } = _ref2;
+    return `
+    margin-top: 0;
+    padding: 8px 0;
+
+    > input:focus {
+      box-shadow: ${shadows.focusPrimary};
+    }
+
+    > * {
+      margin-bottom: 6px;
+      &:not(:last-child) {
+        margin-right: 6px;
+      }
+    }
+  `;
+  },
+  'no-border': _ref3 => {
+    let {
+      theme: {
+        shadows
+      }
+    } = _ref3;
+    return `
+    &:focus-within {
+      box-shadow: ${shadows.focusPrimary};
+    }
+
+    > * {
+      margin-right: 6px;
+      margin-bottom: 6px;
+    }
+  `;
+  }
+};
+const TagInputContainer = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['variant'].includes(prop),
+  target: "ea7vc6o1"
+})("display:flex;flex-wrap:wrap;background-color:", _ref4 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref4;
+  return colors.neutral.backgroundWeak;
+}, ";", _ref5 => {
+  let {
+    variant,
+    theme
+  } = _ref5;
+  return variants[variant] ? variants[variant]({
+    theme
+  }) : variants.base({
+    theme
+  });
+}, ";");
+const StyledInput = /*#__PURE__*/_styled("input", {
+  target: "ea7vc6o0"
+})("font-size:16px;color:", _ref6 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref6;
+  return colors.neutral.text;
+}, ";border:none;outline:none;background-color:", _ref7 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref7;
+  return colors.neutral.backgroundWeak;
+}, ";&::placeholder{color:", _ref8 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref8;
+  return colors.neutral.textWeak;
+}, ";}");
+const convertTagArrayToTagStateArray = tags => (tags || [])?.map((tag, index) => typeof tag === 'object' ? {
+  ...tag,
+  index: getUUID(`tag-${index}`)
+} : {
+  index: getUUID(`tag-${index}`),
+  label: tag
+});
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+const TagInput = _ref9 => {
+  let {
+    disabled = false,
+    id,
+    manualInput = true,
+    name,
+    onChange,
+    onChangeError,
+    placeholder,
+    tags,
+    variant = 'base',
+    className,
+    'data-testid': dataTestId
+  } = _ref9;
+  const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(tags ?? []));
+  const [input, setInput] = useState('');
+  const [status, setStatus] = useState({});
+  useEffect(() => {
+    setTagInput(convertTagArrayToTagStateArray(tags));
+  }, [tags, setTagInput]);
+  const inputRef = useRef(null);
+  const dispatchOnChange = newState => {
+    const changes = newState.map(tag => typeof tag === 'object' ? tag?.label : tag);
+    onChange?.(changes);
+  };
+  const handleContainerClick = () => {
+    if (inputRef.current) {
+      inputRef?.current?.focus();
+    }
+  };
+  const onInputChange = e => setInput(e.target.value);
+  const addTag = () => {
+    const newTagInput = input ? [...tagInputState, {
+      index: getUUID('tag'),
+      label: input
+    }] : tagInputState;
+    setInput('');
+    setTagInput(newTagInput);
+    if (newTagInput.length !== tagInputState.length) {
+      setStatus({
+        [newTagInput[newTagInput.length - 1].index]: STATUS.LOADING
+      });
+    }
+    try {
+      dispatchOnChange(newTagInput);
+      setStatus({
+        [newTagInput[newTagInput.length - 1].index]: STATUS.IDLE
+      });
+    } catch (error) {
+      onChangeError?.(error);
+      setTagInput(tagInputState);
+    }
+  };
+  const deleteTag = tagIndex => {
+    setStatus({
+      [tagIndex]: STATUS.LOADING
+    });
+    const findIndex = tagInputState.findIndex(_ref10 => {
+      let {
+        index
+      } = _ref10;
+      return index === tagIndex;
+    });
+    const newTagInput = [...tagInputState];
+    newTagInput.splice(findIndex, 1);
+    try {
+      dispatchOnChange(newTagInput);
+      setTagInput(newTagInput);
+      setStatus({
+        [tagIndex]: STATUS.IDLE
+      });
+    } catch (error) {
+      onChangeError?.(error);
+      setTagInput(tagInputState);
+    }
+  };
+  const handleInputKeydown = e => {
+    // 32 = Space | 13 = Enter | 8 = Backspace
+    // https://www.w3.org/TR/uievents-key/#control
+    const key = e.key || e.keyCode;
+    const space = [' ', 32];
+    const enter = ['Enter', 13];
+    const tab = ['Tab', 9];
+    const backspace = ['Backspace', 8];
+    if (space.includes(key) || enter.includes(key) || tab.includes(key)) {
+      addTag();
+      e.preventDefault();
+    }
+    if (backspace.includes(key) && inputRef?.current?.selectionStart === 0 && tagInputState.length) {
+      e.preventDefault();
+      deleteTag(tagInputState[tagInputState.length - 1].index);
+    }
+  };
+  const handlePaste = e => {
+    e.preventDefault();
+    const newTagInput = [...tagInputState, {
+      index: getUUID('tag'),
+      label: e?.clipboardData?.getData('Text')
+    }];
+    setTagInput(newTagInput);
+    setStatus({
+      [newTagInput.length - 1]: STATUS.LOADING
+    });
+    try {
+      dispatchOnChange(newTagInput);
+      setStatus({
+        [newTagInput.length - 1]: STATUS.IDLE
+      });
+    } catch (error) {
+      onChangeError?.(error);
+      setTagInput(tagInputState);
+    }
+  };
+  return jsxs(TagInputContainer, {
+    onClick: handleContainerClick,
+    variant: variant,
+    onBlur: addTag,
+    className: className,
+    "data-testid": dataTestId,
+    children: [tagInputState.map(tag => jsx(Tag, {
+      sentiment: "neutral",
+      disabled: disabled,
+      isLoading: status[tag.index] === STATUS.LOADING,
+      onClose: e => {
+        e.stopPropagation();
+        deleteTag(tag.index);
+      },
+      children: tag.label
+    }, tag.index)), !disabled && manualInput ? jsx(StyledInput, {
+      id: id,
+      name: name,
+      "aria-label": name,
+      type: "text",
+      placeholder: !tagInputState.length ? placeholder : '',
+      value: input,
+      onChange: onInputChange,
+      onKeyDown: handleInputKeydown,
+      onPaste: handlePaste,
+      ref: inputRef
+    }) : null]
+  });
+};
+
+export { TagInput };

package/dist/src/components/TagList/index.js

@@ -0,0 +1,110 @@
+import _styled from '@emotion/styled/base';
+import { useState } from 'react';
+import { Popover } from '../Popover/index.js';
+import { Tag } from '../Tag/index.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "eb6op482"
+})(process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "zjik7",
+  styles: "display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const TagsWrapper = /*#__PURE__*/_styled("span", {
+  target: "eb6op481"
+})("cursor:pointer;color:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.primary.text;
+}, ";border:none;font-size:14px;align-self:center;max-width:350px;overflow:hidden;white-space:pre;text-overflow:ellipsis;background-color:transparent;padding-left:8px;padding-right:8px;");
+const StyledTagContainer = /*#__PURE__*/_styled("div", {
+  target: "eb6op480"
+})("display:flex;align-items:center;color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.text;
+}, ";gap:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['1'];
+}, ";", _ref4 => {
+  let {
+    multiline
+  } = _ref4;
+  return multiline && `flex-wrap: wrap;`;
+}, ";");
+const DEFAULT_TAGS = [];
+const TagList = _ref5 => {
+  let {
+    maxLength = 600,
+    tags = DEFAULT_TAGS,
+    threshold = 1,
+    multiline = false,
+    popoverTitle,
+    copiable,
+    copyText,
+    copiedText,
+    className,
+    'data-testid': dataTestId
+  } = _ref5;
+  let tmpThreshold = threshold;
+  if (tags.length > 0 && tags.slice(0, tmpThreshold).reduce((_, tag) => _ + tag).length > maxLength) {
+    // If total tags length in characters is above maxLength,
+    // threshold is decremented in order to prevent too many long tags displayed.
+    tmpThreshold -= 1;
+  }
+  const hasManyTags = tags.length > tmpThreshold || false;
+  const visibleTagsCount = hasManyTags ? tmpThreshold : tags.length;
+  const [isVisible, setIsVisible] = useState(false);
+  if (!tags.length) {
+    return null;
+  }
+  return jsxs(StyledContainer, {
+    className: className,
+    "data-testid": dataTestId,
+    children: [jsx(StyledTagContainer, {
+      multiline: multiline,
+      children: tags.slice(0, visibleTagsCount).map((tag, index) => jsx(Tag
+      // useful when two tags are identical `${tag}-${index}`
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        copiable: copiable,
+        copyText: copyText,
+        copiedText: copiedText,
+        children: tag
+      }, `${tag}-${index}`))
+    }), hasManyTags && jsx(Popover, {
+      title: popoverTitle,
+      visible: isVisible,
+      size: "small",
+      onClose: () => setIsVisible(false),
+      content: jsx(StyledTagContainer, {
+        multiline: true,
+        children: tags.slice(visibleTagsCount).map((tag, index) => jsx(Tag
+        // useful when two tags are identical `${tag}-${index}`
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          copiable: copiable,
+          copyText: copyText,
+          copiedText: copiedText,
+          children: tag
+        }, `${tag}-${index}`))
+      }),
+      children: jsxs(TagsWrapper, {
+        "data-testid": `${dataTestId ?? 'taglist'}-open`,
+        onClick: () => setIsVisible(true),
+        children: ["+", tags.length - tmpThreshold]
+      })
+    })]
+  });
+};
+
+export { TagList };

package/dist/src/components/Text/index.js

@@ -0,0 +1,106 @@
+import _styled from '@emotion/styled/base';
+import { useState, useRef, useEffect } from 'react';
+import recursivelyGetChildrenString from '../../helpers/recursivelyGetChildrenString.js';
+import capitalize from '../../utils/capitalize.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const PROMINENCES = {
+  default: '',
+  strong: 'strong',
+  stronger: 'stronger',
+  weak: 'weak'
+};
+
+/**
+ * Generate all styles available for text based on prominence and variants
+ */
+const generateStyles = _ref => {
+  let {
+    prominence,
+    color,
+    variant,
+    theme,
+    oneLine,
+    disabled,
+    italic,
+    underline
+  } = _ref;
+  // stronger is available only for neutral color
+  const definedProminence = color !== 'neutral' && prominence === 'stronger' ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
+  theme.colors[color];
+  const text = `text${definedProminence}${disabled ? 'Disabled' : ''}`;
+  return `
+    color: ${theme.colors[color][text]};
+
+    font-size: ${theme.typography[variant].fontSize};
+    font-family: ${theme.typography[variant].fontFamily};
+    font-weight: ${theme.typography[variant].weight};
+    letter-spacing: ${theme.typography[variant].letterSpacing};
+    line-height: ${theme.typography[variant].lineHeight};
+    text-transform: ${theme.typography[variant].textCase};
+    text-decoration: ${theme.typography[variant].textDecoration};
+
+    ${oneLine ? `white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;` : ''}
+    ${italic ? `font-style: italic;` : ''}
+    ${underline ? `text-decoration: underline;` : ''}
+  `;
+};
+const StyledText = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['as', 'variant', 'color', 'prominence', 'oneLine', 'disabled', 'italic', 'underline'].includes(prop),
+  target: "e13y3mga0"
+})(generateStyles);
+const Text = _ref2 => {
+  let {
+    variant,
+    children,
+    as,
+    color = 'neutral',
+    oneLine = false,
+    prominence = 'default',
+    className,
+    disabled = false,
+    italic = false,
+    underline = false,
+    id,
+    dir,
+    htmlFor,
+    'data-testid': dataTestId
+  } = _ref2;
+  const [isTruncated, setIsTruncated] = useState(false);
+  const elementRef = useRef(null);
+  const finalStringChildren = recursivelyGetChildrenString(children);
+  useEffect(() => {
+    if (oneLine && elementRef && elementRef.current) {
+      const {
+        offsetWidth,
+        scrollWidth
+      } = elementRef.current;
+      setIsTruncated(offsetWidth < scrollWidth);
+    }
+  }, [oneLine]);
+  return jsx(Tooltip, {
+    text: oneLine && isTruncated ? finalStringChildren : '',
+    children: jsx(StyledText, {
+      ref: elementRef,
+      as: as,
+      prominence: prominence,
+      color: color,
+      variant: variant,
+      oneLine: oneLine,
+      className: className,
+      disabled: disabled,
+      italic: italic,
+      underline: underline,
+      id: id,
+      dir: dir,
+      htmlFor: htmlFor,
+      "data-testid": dataTestId,
+      children: children
+    })
+  });
+};
+
+export { Text };