@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,303 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon/index.js';
+import { Loader } from '../Loader/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+
+// SIZE
+const SIZE_HEIGHT = {
+  large: 48,
+  medium: 40,
+  small: 32,
+  xsmall: 24
+};
+const SIZE_PADDING_KEY = {
+  large: 2,
+  medium: 1.5,
+  small: 1,
+  xsmall: 0.5
+};
+const SIZE_GAP_KEY = {
+  large: 1,
+  medium: 1,
+  small: 1,
+  xsmall: 0.5
+};
+
+// FOCUS RING
+const FOCUS_RING_KEY = {
+  danger: 'focusDanger',
+  info: 'focusInfo',
+  neutral: 'focusNeutral',
+  primary: 'focusPrimary',
+  success: 'focusSuccess',
+  warning: 'focusWarning'
+};
+
+// VARIANTS
+
+const coreStyle = _ref => {
+  let {
+    theme,
+    size,
+    sentiment,
+    iconPosition,
+    fullWidth,
+    disabled,
+    iconOnly
+  } = _ref;
+  const font = size === 'large' ? theme.typography.bodyStrong : theme.typography.bodySmallStrong;
+  let width = 'auto';
+  if (fullWidth) {
+    width = '100%';
+  } else if (iconOnly) {
+    width = `${SIZE_HEIGHT[size]}px`;
+  }
+  return `display: inline-flex;
+  height: ${SIZE_HEIGHT[size]}px;
+  padding: 0 ${theme.space[SIZE_PADDING_KEY[size]]};
+  flex-direction: ${iconPosition === 'right' ? 'row-reverse' : 'row'};
+  gap: ${theme.space[SIZE_GAP_KEY[size]]};
+  border-radius: ${theme.radii.default};
+  box-sizing: border-box;
+  width: ${width};
+  align-items: center;
+  cursor: ${disabled ? 'not-allowed' : 'pointer'};
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+  
+
+  ${disabled ? '' : `
+          &:active {
+            box-shadow: ${theme.shadows[FOCUS_RING_KEY[sentiment]]};
+          }
+        `}
+
+  /* We can't use Text component because of button hover effect, so we need to duplicate */
+  font-size: ${font.fontSize};
+  font-family: ${font.fontFamily};
+  font-weight: ${font.weight};
+  letter-spacing: ${font.letterSpacing};
+  line-height: ${font.lineHeight};
+  paragraph-spacing: ${font.paragraphSpacing};
+  text-case: ${font.textCase};
+`;
+};
+const StyledFilledButton = /*#__PURE__*/_styled('button', {
+  shouldForwardProp: prop => !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes(prop),
+  target: "e112qvla2"
+})(args => coreStyle(args), " background:", _ref2 => {
+  let {
+    theme,
+    sentiment
+  } = _ref2;
+  return theme.colors[sentiment].backgroundStrong;
+}, ";border:none;color:", _ref3 => {
+  let {
+    theme,
+    sentiment
+  } = _ref3;
+  return theme.colors[sentiment][sentiment === 'neutral' ? 'text' : 'textStrong'];
+}, ";", _ref4 => {
+  let {
+    theme,
+    sentiment,
+    disabled
+  } = _ref4;
+  return disabled ? `
+            background: ${theme.colors[sentiment].backgroundStrongDisabled};
+            color:
+              ${theme.colors[sentiment][sentiment === 'neutral' ? 'textDisabled' : 'textStrongDisabled']};
+        ` : `
+            &:hover, &:active
+            {
+                background: ${theme.colors[sentiment].backgroundStrongHover};
+                color:
+                ${theme.colors[sentiment][sentiment === 'neutral' ? 'textHover' : 'textStrongHover']};
+            }
+  `;
+}, ";");
+const StyledOutlinedButton = /*#__PURE__*/_styled('button', {
+  shouldForwardProp: prop => !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes(prop),
+  target: "e112qvla1"
+})(args => coreStyle(args), " background:none;border:1px solid ", _ref5 => {
+  let {
+    theme,
+    sentiment
+  } = _ref5;
+  return theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrong' : 'borderWeak'];
+}, ";color:", _ref6 => {
+  let {
+    theme,
+    sentiment
+  } = _ref6;
+  return theme.colors[sentiment][sentiment === 'neutral' ? 'text' : 'textWeak'];
+}, ";", _ref7 => {
+  let {
+    theme,
+    sentiment,
+    disabled
+  } = _ref7;
+  return disabled ? `
+        color:
+          ${theme.colors[sentiment][sentiment === 'neutral' ? 'textDisabled' : 'textWeakDisabled']};
+        border: 1px solid ${theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrongDisabled' : 'borderWeakDisabled']};
+
+    ` : `
+        &:hover, &:active
+       {
+            background: ${theme.colors[sentiment].backgroundWeakHover};
+            color:
+            ${theme.colors[sentiment][sentiment === 'neutral' ? 'textHover' : 'textWeakHover']};
+            border: 1px solid ${theme.colors[sentiment][sentiment === 'neutral' ? 'borderStrongHover' : 'borderWeakHover']};
+
+        }
+`;
+}, ";");
+const StyledGhostButton = /*#__PURE__*/_styled('button', {
+  shouldForwardProp: prop => !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes(prop),
+  target: "e112qvla0"
+})(args => coreStyle(args), " background:none;border:none;color:", _ref8 => {
+  let {
+    theme,
+    sentiment
+  } = _ref8;
+  return theme.colors[sentiment][sentiment === 'neutral' ? 'text' : 'textWeak'];
+}, ";", _ref9 => {
+  let {
+    theme,
+    sentiment,
+    disabled
+  } = _ref9;
+  return disabled ? `
+        color:
+          ${theme.colors[sentiment][sentiment === 'neutral' ? 'textDisabled' : 'textWeakDisabled']};
+      ` : `
+        &:hover, &:active
+        {
+            background: ${theme.colors[sentiment].backgroundWeakHover};
+            color:
+              ${theme.colors[sentiment][sentiment === 'neutral' ? 'textHover' : 'textWeakHover']};
+        }
+`;
+}, ";");
+const VARIANTS_COMPONENTS = {
+  filled: {
+    button: StyledFilledButton,
+    link: /*#__PURE__*/StyledFilledButton.withComponent('a', {
+      target: "e112qvla3"
+    })
+  },
+  outlined: {
+    button: StyledOutlinedButton,
+    link: /*#__PURE__*/StyledOutlinedButton.withComponent('a', {
+      target: "e112qvla4"
+    })
+  },
+  ghost: {
+    button: StyledGhostButton,
+    link: /*#__PURE__*/StyledGhostButton.withComponent('a', {
+      target: "e112qvla5"
+    })
+  }
+};
+
+// @note: using XOR utility was generating some lint erros
+
+const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
+  let {
+    type = 'button',
+    className,
+    'data-testid': dataTestId,
+    sentiment = 'primary',
+    variant = 'filled',
+    size = 'large',
+    disabled = false,
+    icon,
+    iconPosition = 'left',
+    fullWidth = false,
+    isLoading = false,
+    children,
+    onClick,
+    name,
+    'aria-label': ariaLabel,
+    'aria-current': ariaCurrent,
+    href,
+    download,
+    target,
+    role,
+    tooltip
+  } = _ref10;
+  const computeIsDisabled = disabled || isLoading;
+  const content = jsxs(Fragment, {
+    children: [!isLoading && icon ? jsx(Icon, {
+      name: icon,
+      size: 16
+    }) : null, isLoading ? jsx(Loader, {
+      active: true,
+      trailColor: "transparent",
+      size: "1em",
+      color: "currentColor"
+    }) : null, children && typeof children !== 'string' ? jsx("div", {
+      children: children
+    }) : children]
+  });
+
+  // @note: an anchor can't be disabled
+  if (href && !computeIsDisabled) {
+    const Component = VARIANTS_COMPONENTS[variant].link;
+    return jsx(Tooltip, {
+      text: tooltip,
+      children: jsx(Component, {
+        role: role,
+        className: className,
+        "data-testid": dataTestId,
+        disabled: false,
+        fullWidth: fullWidth,
+        iconPosition: iconPosition,
+        sentiment: sentiment,
+        size: size,
+        type: type,
+        onClick: onClick,
+        "aria-label": ariaLabel,
+        "aria-current": ariaCurrent,
+        href: href,
+        target: target,
+        download: download,
+        ref: ref,
+        iconOnly: !!icon && !children,
+        children: content
+      })
+    });
+  }
+  const Component = VARIANTS_COMPONENTS[variant].button;
+  return jsx(Tooltip, {
+    text: tooltip,
+    children: jsx(Component, {
+      role: role,
+      className: className,
+      "data-testid": dataTestId,
+      disabled: computeIsDisabled,
+      fullWidth: fullWidth,
+      iconPosition: iconPosition,
+      sentiment: sentiment,
+      size: size,
+      type: type,
+      onClick: onClick,
+      ref: ref,
+      name: name,
+      "aria-label": ariaLabel,
+      "aria-current": ariaCurrent,
+      iconOnly: !!icon && !children,
+      children: content
+    })
+  });
+});
+
+export { Button };

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

@@ -0,0 +1,81 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef } from 'react';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/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 StyledStack = /*#__PURE__*/_styled(Stack, {
+  target: "exwxj841"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1b3njxj",
+  styles: "&[data-disabled='true']{cursor:not-allowed;}"
+} : {
+  name: "1b3njxj",
+  styles: "&[data-disabled='true']{cursor:not-allowed;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const BorderedBox = /*#__PURE__*/_styled("div", {
+  target: "exwxj840"
+})("border:1px solid ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.border;
+}, ";border-radius:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.radii.default;
+}, ";padding:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['3'];
+}, ";&[data-is-active='true']{border:1px solid ", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.primary.border;
+}, ";}&[data-disabled='true']{border:1px solid ", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.borderDisabled;
+}, ";}");
+const Card = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let {
+    header,
+    disabled = false,
+    isActive = false,
+    children,
+    className,
+    'data-testid': dataTestId
+  } = _ref6;
+  return header ? jsxs(StyledStack, {
+    gap: 1,
+    className: className,
+    "data-testid": dataTestId,
+    "data-disabled": disabled,
+    ref: ref,
+    children: [typeof header === 'string' ? jsx(Text, {
+      variant: "heading",
+      as: "h2",
+      disabled: disabled,
+      children: header
+    }) : header, jsx(BorderedBox, {
+      "data-is-active": isActive,
+      "data-disabled": disabled,
+      children: children
+    })]
+  }) : jsx(BorderedBox, {
+    "data-is-active": isActive,
+    "data-disabled": disabled,
+    className: className,
+    "data-testid": dataTestId,
+    ref: ref,
+    children: children
+  });
+});
+
+export { Card };

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

@@ -0,0 +1,162 @@
+import _styled from '@emotion/styled/base';
+import { useRef, useEffect, useState } from 'react';
+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 StyledWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1id70w04"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1239432",
+  styles: "position:relative;margin-left:-100px;margin-right:-100px"
+} : {
+  name: "1239432",
+  styles: "position:relative;margin-left:-100px;margin-right:-100px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledBeforeScroll = /*#__PURE__*/_styled("span", {
+  target: "e1id70w03"
+})("position:absolute;width:100px;height:100%;content:'';background:linear-gradient(\n    -90deg,\n    rgba(255, 255, 255, 0),\n    ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.backgroundWeak;
+}, "\n  );cursor:w-resize;z-index:auto;");
+const StyledScrollableWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1id70w02"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1td2787",
+  styles: "overflow-x:scroll;overflow-y:hidden;white-space:nowrap;padding-left:100px;padding-right:100px;padding-bottom:16px;>*:not(:last-child){margin-right:16px;}"
+} : {
+  name: "1td2787",
+  styles: "overflow-x:scroll;overflow-y:hidden;white-space:nowrap;padding-left:100px;padding-right:100px;padding-bottom:16px;>*:not(:last-child){margin-right:16px;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledAfterScroll = /*#__PURE__*/_styled("span", {
+  target: "e1id70w01"
+})("position:absolute;bottom:0;right:0;width:100px;height:100%;content:'';cursor:e-resize;z-index:auto;background:linear-gradient(\n    -90deg,\n    ", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.backgroundWeak;
+}, ",\n    rgba(255, 255, 255, 0)\n  );");
+const StyledBorderWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1id70w00"
+})("display:inline-block;border-radius:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.radii.default;
+}, ";border:1px solid ", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.borderWeak;
+}, ";height:261px;width:248px;max-width:240px;overflow-wrap:break-word;white-space:normal;cursor:grab;&:hover,&:active,&:focus{border:1px solid ", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.primary.border;
+}, ";transition:box-shadow 0.2s ease;box-shadow:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.shadows.focusPrimary;
+}, ";}img{border-radius:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.radii.default;
+}, " ", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.radii.default;
+}, " 0 0;}");
+const CarouselItem = _ref9 => {
+  let {
+    children
+  } = _ref9;
+  return jsx(StyledBorderWrapper, {
+    draggable: "true",
+    children: children
+  });
+};
+const Carousel = _ref10 => {
+  let {
+    children,
+    className,
+    'data-testid': dataTestId = 'scrollbar'
+  } = _ref10;
+  const scrollRef = useRef(null);
+  let intervalLeft;
+  let intervalRight;
+  const handleScrollRight = () => {
+    intervalRight = setInterval(() => {
+      if (scrollRef.current?.scrollTo && scrollRef.current?.scrollLeft) {
+        scrollRef.current.scrollTo?.(scrollRef.current.scrollLeft - 25, 0);
+      }
+    }, 30);
+  };
+  const handleScrollLeft = () => {
+    intervalLeft = setInterval(() => {
+      if (scrollRef.current?.scrollTo && scrollRef.current?.scrollLeft) {
+        scrollRef.current.scrollTo(scrollRef.current.scrollLeft + 25, 0);
+      }
+    }, 30);
+  };
+  const handleScrollX = function (scrollX) {
+    if (scrollX === void 0) {
+      scrollX = 25;
+    }
+    if (scrollRef.current?.scrollTo && scrollRef.current?.scrollLeft) {
+      scrollRef.current.scrollTo?.(scrollRef.current.scrollLeft + scrollX, 0);
+    }
+  };
+  const cleanUp = () => {
+    clearInterval(intervalLeft);
+    clearInterval(intervalRight);
+  };
+  useEffect(() => cleanUp);
+  const [dragStartX, setDragStartX] = useState(0);
+  const [deltaX, setDeltaX] = useState(0);
+  return jsxs(StyledWrapper, {
+    className: className,
+    "data-testid": dataTestId,
+    children: [jsx(StyledBeforeScroll, {
+      "data-testid": `${dataTestId}-before`,
+      onMouseOver: handleScrollRight,
+      onMouseLeave: () => clearInterval(intervalRight)
+    }), jsx(StyledScrollableWrapper, {
+      ref: scrollRef,
+      onDragOver: e => {
+        setDeltaX(dragStartX - e.pageX);
+        setDragStartX(e.pageX);
+      },
+      onDragStart: e => {
+        const blankImg = new Image();
+        blankImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
+        e.dataTransfer.setDragImage(blankImg, 0, 0);
+        setDragStartX(e.clientX);
+      },
+      onDrag: () => handleScrollX(deltaX),
+      onDragEnd: () => {
+        setDeltaX(0);
+        setDragStartX(0);
+      },
+      onMouseUp: e => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      className: className,
+      "data-testid": `${dataTestId}-wrapper`,
+      children: children
+    }), jsx(StyledAfterScroll, {
+      "data-testid": `${dataTestId}-after`,
+      onMouseOver: handleScrollLeft,
+      onMouseLeave: () => clearInterval(intervalLeft)
+    })]
+  });
+};
+Carousel.Item = CarouselItem;
+
+export { Carousel, CarouselItem };