@ultraviolet/ui 1.0.0

package/dist/src/components/PieChart/Legends.js

@@ -0,0 +1,183 @@
+import _styled from '@emotion/styled/base';
+import { keyframes, css } from '@emotion/react';
+import { Tooltip } from '../Tooltip/index.js';
+import TooltipContainer from './Tooltip.js';
+import patternVariants from './patterns.js';
+import { jsx, jsxs } 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 bulletFlashAnim = keyframes`
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+const animationFlash = isFocused => isFocused ? /*#__PURE__*/css(bulletFlashAnim.styles, " animation:", bulletFlashAnim.name, " linear 1500ms infinite;") : '';
+const List = /*#__PURE__*/_styled("ul", {
+  target: "e12qyakg8"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1yalzuy",
+  styles: "font-size:14px;list-style-type:none;display:flex;flex:1;flex-direction:column;max-height:100%;overflow-y:auto"
+} : {
+  name: "1yalzuy",
+  styles: "font-size:14px;list-style-type:none;display:flex;flex:1;flex-direction:column;max-height:100%;overflow-y:auto",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const ListItem = /*#__PURE__*/_styled("li", {
+  target: "e12qyakg7"
+})("display:flex;align-items:center;margin-top:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";width:100%;color:", _ref2 => {
+  let {
+    isFocused,
+    theme
+  } = _ref2;
+  return isFocused ? theme.colors.primary.textWeak : theme.colors.neutral.text;
+}, ";");
+const Bullet = /*#__PURE__*/_styled("div", {
+  target: "e12qyakg6"
+})("display:inline-block;border-radius:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.radii.circle;
+}, ";width:10px;height:10px;margin:0 ", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space['1'];
+}, ";background:", _ref5 => {
+  let {
+    color
+  } = _ref5;
+  return color;
+}, ";", _ref6 => {
+  let {
+    needPattern,
+    color,
+    id
+  } = _ref6;
+  if (!needPattern) return null;
+  return patternVariants?.[`${id}-dot`]?.(color);
+}, " ", _ref7 => {
+  let {
+    isFocused
+  } = _ref7;
+  return animationFlash(isFocused);
+}, ";");
+const Label = /*#__PURE__*/_styled("div", {
+  target: "e12qyakg5"
+})(process.env.NODE_ENV === "production" ? {
+  name: "lvt6sf",
+  styles: "display:flex;flex:1;align-items:baseline"
+} : {
+  name: "lvt6sf",
+  styles: "display:flex;flex:1;align-items:baseline",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Value = /*#__PURE__*/_styled("div", {
+  target: "e12qyakg4"
+})("margin-left:6px;font-weight:", _ref8 => {
+  let {
+    isFocused
+  } = _ref8;
+  return isFocused ? 500 : 400;
+}, ";");
+const Text = /*#__PURE__*/_styled("span", {
+  target: "e12qyakg3"
+})("flex:none;margin-right:6px;font-weight:", _ref9 => {
+  let {
+    isFocused
+  } = _ref9;
+  return isFocused ? 500 : 400;
+}, ";");
+const ToggleBox = /*#__PURE__*/_styled("div", {
+  target: "e12qyakg2"
+})(process.env.NODE_ENV === "production" ? {
+  name: "ki8u62",
+  styles: "width:250px;height:21px;position:absolute"
+} : {
+  name: "ki8u62",
+  styles: "width:250px;height:21px;position:absolute",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Line = /*#__PURE__*/_styled("span", {
+  target: "e12qyakg1"
+})("border-bottom:1px solid ", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral.border;
+}, ";position:relative;width:100%;");
+const ProgressiveLine = /*#__PURE__*/_styled("span", {
+  target: "e12qyakg0"
+})("border-bottom:1px solid ", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.colors.primary.borderWeak;
+}, ";position:absolute;left:0;top:0;bottom:-1px;transition:width 500ms ease;width:", _ref12 => {
+  let {
+    isFocused
+  } = _ref12;
+  return isFocused ? 100 : 0;
+}, "%;");
+const Legends = _ref13 => {
+  let {
+    focused,
+    data,
+    onFocusChange,
+    colors
+  } = _ref13;
+  return jsx(List, {
+    children: data?.map((item, index) => {
+      const isSegmentFocused = focused !== undefined && item.id === focused;
+      const id = `chart-legend-${item.id}`;
+      return jsx(Tooltip, {
+        visible: isSegmentFocused,
+        id: id,
+        text: jsx(TooltipContainer, {
+          data: item
+        }),
+        children: jsxs(ListItem, {
+          isFocused: isSegmentFocused,
+          children: [jsx(ToggleBox, {
+            "data-testid": id,
+            onMouseOver: () => onFocusChange(item.id),
+            onFocus: () => onFocusChange(item.id),
+            onMouseOut: () => onFocusChange(),
+            onBlur: () => onFocusChange()
+          }), jsx(Bullet, {
+            color: colors[index],
+            isFocused: isSegmentFocused,
+            needPattern: item.needPattern,
+            id: `chart-legend-${item.id}`
+          }), jsxs(Label, {
+            children: [jsx(Text, {
+              isFocused: isSegmentFocused,
+              children: item.name
+            }), jsx(Line, {
+              children: jsx(ProgressiveLine, {
+                isFocused: isSegmentFocused
+              })
+            })]
+          }), jsx(Value, {
+            isFocused: isSegmentFocused,
+            children: item.value
+          })]
+        })
+      }, item.id);
+    })
+  });
+};
+var Legends$1 = Legends;
+
+export { Legends$1 as default };

package/dist/src/components/PieChart/Tooltip.js

@@ -0,0 +1,64 @@
+import _styled from '@emotion/styled/base';
+import { Text } from '../Text/index.js';
+import { jsx, jsxs } 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 StyledList = /*#__PURE__*/_styled("ul", {
+  target: "e44jccr1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1vatjen",
+  styles: "padding:0 8px 8px 8px;margin:0;width:100%"
+} : {
+  name: "1vatjen",
+  styles: "padding:0 8px 8px 8px;margin:0;width:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledItem = /*#__PURE__*/_styled("li", {
+  target: "e44jccr0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1duinrf",
+  styles: "display:flex;margin-top:6px;width:100%;justify-content:space-between;text-align:left;gap:8px"
+} : {
+  name: "1duinrf",
+  styles: "display:flex;margin-top:6px;width:100%;justify-content:space-between;text-align:left;gap:8px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Tooltip = _ref => {
+  let {
+    data
+  } = _ref;
+  return jsx("div", {
+    tabIndex: -1,
+    role: "tooltip",
+    children: jsxs(StyledList, {
+      children: [jsxs(StyledItem, {
+        children: [jsx(Text, {
+          as: "p",
+          variant: "body",
+          prominence: "stronger",
+          children: data.name
+        }), jsx(Text, {
+          as: "p",
+          variant: "body",
+          prominence: "stronger",
+          children: data.value
+        })]
+      }), data.details?.map(detail => jsxs(StyledItem, {
+        children: [jsx(Text, {
+          as: "p",
+          variant: "bodySmall",
+          prominence: "stronger",
+          children: detail.name
+        }), jsx(Text, {
+          as: "p",
+          variant: "bodySmall",
+          prominence: "stronger",
+          children: detail.value
+        })]
+      }, detail.name))]
+    })
+  });
+};
+var TooltipContainer = Tooltip;
+
+export { TooltipContainer as default };

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

@@ -0,0 +1,133 @@
+import _styled from '@emotion/styled/base';
+import { useTheme } from '@emotion/react';
+import { Pie } from '@nivo/pie';
+import { useState, useCallback } from 'react';
+import { getLegendColor } from '../../helpers/legend.js';
+import { Text } from '../Text/index.js';
+import Legends from './Legends.js';
+import { jsx, jsxs } 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 Container = /*#__PURE__*/_styled("div", {
+  target: "epjfe5p2"
+})("display:flex;align-items:center;height:", _ref => {
+  let {
+    height
+  } = _ref;
+  return `${height}px`;
+}, ";");
+const EmptyLegend = /*#__PURE__*/_styled("div", {
+  target: "epjfe5p1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "dwqz7h",
+  styles: "display:flex;align-items:center;margin-left:20px"
+} : {
+  name: "dwqz7h",
+  styles: "display:flex;align-items:center;margin-left:20px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledContent = /*#__PURE__*/_styled("div", {
+  target: "epjfe5p0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "qcd8cv",
+  styles: "display:inline-block;position:absolute;bottom:0;left:0;right:0;top:0;font-size:25px;line-height:100px;height:100px;width:100px;margin:auto;text-align:center;vertical-align:middle"
+} : {
+  name: "qcd8cv",
+  styles: "display:inline-block;position:absolute;bottom:0;left:0;right:0;top:0;font-size:25px;line-height:100px;height:100px;width:100px;margin:auto;text-align:center;vertical-align:middle",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const DEFAULT_CHARTPROPS = {};
+const DEFAULT_MARGIN = {
+  bottom: 10,
+  left: 10,
+  right: 10,
+  top: 10
+};
+
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+const PieChart = _ref2 => {
+  let {
+    height = 206,
+    width = 206,
+    data = undefined,
+    emptyLegend,
+    content,
+    withLegend = false,
+    margin = DEFAULT_MARGIN,
+    chartProps = DEFAULT_CHARTPROPS
+  } = _ref2;
+  const theme = useTheme();
+  const [currentFocusIndex, setCurrentFocusIndex] = useState();
+  const emptyTooltip = useCallback(() => jsx("span", {}), []);
+  const isEmpty = !data || data.length === 0;
+  const EmptyLegendDisplayed = useCallback(() => emptyLegend ? jsx(EmptyLegend, {
+    children: jsx(Text, {
+      variant: "body",
+      as: "p",
+      children: emptyLegend
+    })
+  }) : null, [emptyLegend]);
+  const localColors = getLegendColor(theme);
+  const LegendDisplayer = useCallback(() => isEmpty ? jsx(EmptyLegendDisplayed, {}) : jsx(Legends, {
+    focused: currentFocusIndex,
+    data: data,
+    onFocusChange: setCurrentFocusIndex,
+    colors: localColors
+  }), [isEmpty, currentFocusIndex, data, EmptyLegendDisplayed, localColors]);
+  return jsxs(Container, {
+    height: height,
+    children: [jsxs("div", {
+      style: {
+        position: 'relative'
+      },
+      children: [jsx(Pie, {
+        colors: localColors,
+        height: height,
+        width: width,
+        value: "percent",
+        enableArcLabels: false,
+        enableArcLinkLabels: false,
+        data: !isEmpty ? data : [{
+          id: 'empty',
+          percent: 100
+        }],
+        defs: [{
+          background: 'inherit',
+          color: theme.colors.neutral.textStrong,
+          id: 'lines',
+          lineWidth: 2,
+          rotation: 0,
+          spacing: 5,
+          type: 'patternLines'
+        }],
+        fill: [{
+          id: 'lines',
+          match: {
+            id: 'discount'
+          }
+        }],
+        margin: margin,
+        innerRadius: 0.8,
+        cornerRadius: 0,
+        padAngle: 1,
+        activeOuterRadiusOffset: !isEmpty ? 4 : 0,
+        tooltip: emptyTooltip,
+        onMouseEnter: (datum, event) => {
+          if (!isEmpty) {
+            const pie = event.currentTarget;
+            pie.style.cursor = 'pointer';
+            setCurrentFocusIndex(datum.id.toString());
+          }
+        },
+        onMouseLeave: () => setCurrentFocusIndex(undefined),
+        ...chartProps
+      }), content ? jsx(StyledContent, {
+        children: content
+      }) : null]
+    }), withLegend ? jsx(LegendDisplayer, {}) : null]
+  });
+};
+
+export { PieChart };

package/dist/src/components/PieChart/patterns.js

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+
+const discountDot = color => /*#__PURE__*/css("opacity:0.6;border:0.3px solid ", color, ";background-size:10px;background:repeating-linear-gradient(\n    0deg,\n    transparent,\n    transparent 1px,\n    ", color, " 1px,\n    ", color, " 3px\n  );");
+const patterns = {
+  'discount-dot': discountDot
+};
+var patternVariants = patterns;
+
+export { patternVariants as default };

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

@@ -0,0 +1,131 @@
+import _styled from '@emotion/styled/base';
+import { useRef, useCallback, useEffect } from 'react';
+import { Button } from '../Button/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const SIZES_WIDTH = {
+  small: 320,
+  medium: 420,
+  large: 520
+};
+const StyledTooltip = /*#__PURE__*/_styled(Tooltip, {
+  shouldForwardProp: prop => !['sentiment', 'size'].includes(prop),
+  target: "ejpxv5a0"
+})("padding:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['2'];
+}, ";width:", _ref2 => {
+  let {
+    size
+  } = _ref2;
+  return SIZES_WIDTH[size];
+}, "px;max-width:", _ref3 => {
+  let {
+    size
+  } = _ref3;
+  return SIZES_WIDTH[size];
+}, "px;text-align:initial;", _ref4 => {
+  let {
+    theme,
+    sentiment
+  } = _ref4;
+  if (sentiment === 'neutral') {
+    return `
+      background: ${theme.colors.neutral.background};
+      box-shadow: ${theme.shadows.popover};
+      &::after {
+        border-color: ${theme.colors.neutral.background} transparent transparent transparent;
+      }
+      `;
+  }
+  return `
+      background: ${theme.colors.primary.backgroundStrong};
+      box-shadow: ${theme.shadows.popover};
+      &::after {
+        border-color: ${theme.colors.primary.backgroundStrong} transparent transparent transparent;
+      }
+      `;
+}, ";");
+const ContentWrapper = _ref5 => {
+  let {
+    title,
+    onClose,
+    children,
+    sentiment
+  } = _ref5;
+  return jsxs(Stack, {
+    gap: 1,
+    children: [jsxs(Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      children: [jsx(Text, {
+        variant: "bodyStrong",
+        as: "h3",
+        prominence: sentiment === 'neutral' ? 'strong' : 'stronger',
+        children: title
+      }), jsx(Button, {
+        variant: sentiment === 'neutral' ? 'ghost' : 'filled',
+        sentiment: sentiment === 'neutral' ? 'neutral' : 'primary',
+        onClick: onClose,
+        size: "small",
+        icon: "close",
+        "aria-label": "close"
+      })]
+    }), typeof children === 'string' ? jsx(Text, {
+      variant: "bodySmall",
+      as: "p",
+      prominence: sentiment === 'neutral' ? 'strong' : 'stronger',
+      children: children
+    }) : children]
+  });
+};
+const Popover = _ref6 => {
+  let {
+    visible = false,
+    children,
+    placement,
+    content,
+    title,
+    sentiment = 'neutral',
+    size = 'medium',
+    onClose,
+    className,
+    'data-testid': dataTestId
+  } = _ref6;
+  const ref = useRef(null);
+  const handleClickOutside = useCallback(event => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      onClose();
+    }
+  }, [onClose]);
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [handleClickOutside]);
+  return jsx(StyledTooltip, {
+    visible: visible,
+    placement: placement,
+    text: jsx(ContentWrapper, {
+      title: title,
+      onClose: onClose,
+      sentiment: sentiment,
+      children: content
+    }),
+    className: className,
+    sentiment: sentiment,
+    "data-testid": dataTestId,
+    size: size,
+    role: "dialog",
+    ref: ref,
+    children: children
+  });
+};
+
+export { Popover };

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

@@ -0,0 +1,72 @@
+import _styled from '@emotion/styled/base';
+import { keyframes } from '@emotion/react';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const shineAnimation = keyframes`
+  from {
+    left: -25%;
+  }
+
+  to {
+    left: 100%;
+  }
+`;
+const StyledProgressContainer = /*#__PURE__*/_styled("div", {
+  target: "e1b95x8r2"
+})("overflow:hidden;position:relative;height:4px;margin-left:0;margin-right:0;border-radius:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.radii.default;
+}, ";background-color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.backgroundStrong;
+}, ";");
+const StyledProgress = /*#__PURE__*/_styled("div", {
+  target: "e1b95x8r1"
+})("position:absolute;top:0;left:0;bottom:0;width:25%;opacity:0.8;background:linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0),\n    rgba(255, 255, 255, 0.3),\n    rgba(255, 255, 255, 0.4),\n    rgba(255, 255, 255, 0.3),\n    rgba(255, 255, 255, 0)\n  );animation:", shineAnimation, " 1s linear infinite;");
+const StyledFilled = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['sentiment', 'value'].includes(prop),
+  target: "e1b95x8r0"
+})("border-radius:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.radii.default;
+}, ";position:absolute;top:0;left:0;bottom:0;background-color:", _ref4 => {
+  let {
+    theme,
+    sentiment
+  } = _ref4;
+  return theme.colors[sentiment].backgroundStrong ?? 'inherit';
+}, ";transition:0.3s width;width:", _ref5 => {
+  let {
+    value
+  } = _ref5;
+  return Math.max(0, Math.min(100, value));
+}, "%;");
+const ProgressBar = _ref6 => {
+  let {
+    progress = false,
+    value = 0,
+    sentiment = 'primary',
+    className,
+    'data-testid': dataTestId
+  } = _ref6;
+  return jsx(StyledProgressContainer, {
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    className: className,
+    "data-testid": dataTestId,
+    children: progress ? jsx(StyledProgress, {}) : jsx(StyledFilled, {
+      sentiment: sentiment,
+      value: value
+    })
+  });
+};
+
+export { ProgressBar };