@ultraviolet/ui 1.0.0

package/dist/src/components/LineChart/CustomLegend.js

@@ -0,0 +1,147 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+import { getLegendColor } from '../../helpers/legend.js';
+import { Checkbox } from '../Checkbox/index.js';
+import { Text } from '../Text/index.js';
+import { getSelected, getMin, getMax, getAverage, getCurrent } from './helpers.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 styles = {
+  body: theme => /*#__PURE__*/css(">:not(:last-child){border-bottom:1px solid ", theme.colors.neutral.backgroundStrong, ";}"),
+  head: theme => /*#__PURE__*/css("display:flex;padding-bottom:8px;border-bottom:1px solid ", theme.colors.neutral.backgroundStrong, ";>:not(:last-child){margin-right:8px;}"),
+  legend: index => theme => /*#__PURE__*/css("margin-left:16px;width:32px;height:2px;background-color:", getLegendColor(theme)[index], ";"),
+  row: process.env.NODE_ENV === "production" ? {
+    name: "fevtnc",
+    styles: "display:flex;padding:4px 0;>:not(:last-child){margin-right:8px;}"
+  } : {
+    name: "fevtnc",
+    styles: "display:flex;padding:4px 0;>:not(:last-child){margin-right:8px;}",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
+};
+const StyledText = /*#__PURE__*/_styled(Text, {
+  target: "erndk5t3"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1rtr7zh",
+  styles: "text-align:right;flex:1;min-width:72px;align-self:center"
+} : {
+  name: "1rtr7zh",
+  styles: "text-align:right;flex:1;min-width:72px;align-self:center",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Cell = _ref => {
+  let {
+    value,
+    variant
+  } = _ref;
+  return jsx(StyledText, {
+    variant: variant,
+    color: "neutral",
+    as: "span",
+    children: value
+  });
+};
+const CellValueContainer = /*#__PURE__*/_styled("div", {
+  target: "erndk5t2"
+})(process.env.NODE_ENV === "production" ? {
+  name: "s5xdrg",
+  styles: "display:flex;align-items:center"
+} : {
+  name: "s5xdrg",
+  styles: "display:flex;align-items:center",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const LongContainer = /*#__PURE__*/_styled("div", {
+  target: "erndk5t1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1ajplif",
+  styles: "display:flex;flex:6"
+} : {
+  name: "1ajplif",
+  styles: "display:flex;flex:6",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const noop = value => value.toString();
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "erndk5t0"
+})("margin-top:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space[2];
+}, ";");
+const CustomLegend = _ref3 => {
+  let {
+    axisTransformer = noop,
+    data,
+    selected,
+    setSelected,
+    className,
+    'data-testid': dataTestId
+  } = _ref3;
+  return jsxs(StyledContainer, {
+    className: className,
+    "data-testid": dataTestId,
+    children: [jsxs("div", {
+      css: styles.head,
+      children: [jsx(LongContainer, {
+        children: "Legend"
+      }), jsx(Cell, {
+        variant: "body",
+        value: "Minimum"
+      }), jsx(Cell, {
+        variant: "body",
+        value: "Maximum"
+      }), jsx(Cell, {
+        variant: "body",
+        value: "Average"
+      }), jsx(Cell, {
+        variant: "body",
+        value: "Current"
+      })]
+    }), jsx("div", {
+      css: styles.body,
+      children: data?.map((row, index) => {
+        const values = row.data.map(val => val.y);
+        const labelIndexed = `${row.id}${index}`;
+        const id = row.id.toString();
+        return jsxs("div", {
+          css: styles.row,
+          children: [jsx(LongContainer, {
+            children: jsx(Checkbox, {
+              checked: selected.includes(labelIndexed),
+              name: id,
+              onChange: () => setSelected([...getSelected(id, index, selected)]),
+              children: jsxs(CellValueContainer, {
+                children: [jsx(Text, {
+                  as: "span",
+                  variant: "bodySmall",
+                  color: "neutral",
+                  children: row?.['label']
+                }), jsx("div", {
+                  "data-testid": `label-${id}`,
+                  css: styles.legend(index)
+                })]
+              })
+            })
+          }), jsx(Cell, {
+            variant: "bodySmall",
+            value: axisTransformer(getMin(values))
+          }), jsx(Cell, {
+            variant: "bodySmall",
+            value: axisTransformer(getMax(values))
+          }), jsx(Cell, {
+            variant: "bodySmall",
+            value: axisTransformer(getAverage(values))
+          }), jsx(Cell, {
+            variant: "bodySmall",
+            value: axisTransformer(getCurrent(values))
+          })]
+        }, labelIndexed);
+      })
+    })]
+  });
+};
+
+export { CustomLegend };

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

@@ -0,0 +1,58 @@
+import _styled from '@emotion/styled/base';
+import { Text } from '../Text/index.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const LineTooltipContainer = /*#__PURE__*/_styled("div", {
+  target: "e11niu3b1"
+})("display:flex;background:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.backgroundStronger;
+}, ";border-radius:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.radii.small;
+}, ";box-shadow:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.shadows.tooltip;
+}, ";padding:5px 9px;align-items:center;");
+const LineColorSquare = /*#__PURE__*/_styled("span", {
+  target: "e11niu3b0"
+})("display:block;width:12px;height:12px;background:", _ref4 => {
+  let {
+    color
+  } = _ref4;
+  return color;
+}, ";margin-right:12px;");
+const LineChartTooltip = _ref5 => {
+  let {
+    point
+  } = _ref5;
+  return jsxs(LineTooltipContainer, {
+    children: [jsx("div", {
+      children: jsx(LineColorSquare, {
+        color: point.serieColor
+      })
+    }), jsxs("div", {
+      children: [jsx(Text, {
+        variant: "bodyStronger",
+        color: "neutral",
+        prominence: "stronger",
+        as: "div",
+        children: point.data.yFormatted
+      }), jsx(Text, {
+        variant: "bodySmall",
+        color: "neutral",
+        prominence: "stronger",
+        as: "div",
+        children: point.data.xFormatted
+      })]
+    })]
+  });
+};
+
+export { LineChartTooltip };

package/dist/src/components/LineChart/helpers.js

@@ -0,0 +1,75 @@
+const parse = data => {
+  if (typeof data === 'number') return data || 0;
+  if (typeof data === 'string') return parseFloat(data) || 0;
+  if (data instanceof Date) return data.getTime();
+  return 0;
+};
+const getMin = function (values) {
+  if (values === void 0) {
+    values = [];
+  }
+  return values.length ? Math.min(...values.map(parse)) : 0;
+};
+const getMax = function (values) {
+  if (values === void 0) {
+    values = [];
+  }
+  return values.length ? Math.max(...values.map(parse)) : 0;
+};
+const getAverage = function (values) {
+  if (values === void 0) {
+    values = [];
+  }
+  return values.length ? Math.round(values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100) / 100 : 0;
+};
+const getMaxChartValue = preppedData => {
+  if (!preppedData?.length) return 0;
+  const maximum = Math.max(...preppedData.map(_ref => {
+    let {
+      data
+    } = _ref;
+    return getMax(data.map(_ref2 => {
+      let {
+        y
+      } = _ref2;
+      return y || 0;
+    }));
+  }));
+  return Math.ceil(maximum + maximum * 0.1);
+};
+const getMinChartValue = preppedData => {
+  if (!preppedData?.length) return 0;
+  const minimum = Math.min(...preppedData.map(_ref3 => {
+    let {
+      data
+    } = _ref3;
+    return getMin(data.map(_ref4 => {
+      let {
+        y
+      } = _ref4;
+      return y || 0;
+    }));
+  }));
+  return Math.floor(minimum - minimum * 0.1);
+};
+const getCurrent = function (values) {
+  if (values === void 0) {
+    values = [];
+  }
+  return values.length ? values[values.length - 1] : 0;
+};
+const getSelected = function (label, index, selected) {
+  if (selected === void 0) {
+    selected = [];
+  }
+  const labelIndexed = label + index.toString();
+  const found = selected.indexOf(labelIndexed);
+  if (found > -1) {
+    selected.splice(found, 1);
+  } else {
+    selected.push(labelIndexed);
+  }
+  return selected;
+};
+
+export { getAverage, getCurrent, getMax, getMaxChartValue, getMin, getMinChartValue, getSelected };

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

@@ -0,0 +1,139 @@
+import { useTheme } from '@emotion/react';
+import { ResponsiveLine } from '@nivo/line';
+import { useState, useEffect } from 'react';
+import { getLegendColor } from '../../helpers/legend.js';
+import { CustomLegend } from './CustomLegend.js';
+import { LineChartTooltip } from './Tooltip.js';
+import { getMaxChartValue, getMinChartValue } from './helpers.js';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+
+const DEFAULT_MARGIN = {
+  bottom: 50,
+  left: 60,
+  right: 25,
+  top: 50
+};
+const DEFAULT_XSCALE = {
+  format: '%Y-%m-%dT%H:%M:%S%Z',
+  // 2021-08-30T02:56:07Z
+  precision: 'minute',
+  type: 'time',
+  useUTC: false
+};
+const DEFAULT_YSCALE = {
+  type: 'linear'
+};
+const DEFAULT_CHARTPROPS = {};
+
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+const LineChart = _ref => {
+  let {
+    height = '537px',
+    // to maintain aspect ratio based on our standard 1074px width
+    margin = DEFAULT_MARGIN,
+    xScale = DEFAULT_XSCALE,
+    yScale = DEFAULT_YSCALE,
+    data,
+    withLegend = false,
+    axisFormatters,
+    pointFormatters,
+    tickValues,
+    chartProps = DEFAULT_CHARTPROPS,
+    'data-testid': dataTestId
+  } = _ref;
+  const theme = useTheme();
+  const dataset = {
+    datasets: data?.map(d => ({
+      data: d.data,
+      id: d.id,
+      label: d?.['label']
+    }))
+  };
+  const chartTheme = {
+    axis: {
+      ticks: {
+        line: {
+          stroke: theme.colors.neutral.backgroundStrong,
+          strokeWidth: 1
+        }
+      }
+    },
+    fontFamily: theme.typography.body.fontFamily,
+    fontSize: 12,
+    textColor: theme.colors.neutral.textWeak
+  };
+  const [selected, setSelected] = useState(dataset.datasets?.map((_ref2, index) => {
+    let {
+      id
+    } = _ref2;
+    return `${id}${index}`;
+  }));
+  const finalData = dataset.datasets?.filter((_ref3, index) => {
+    let {
+      id
+    } = _ref3;
+    return selected ? selected.includes(`${id}${index}`) : false;
+  });
+  useEffect(() => {
+    if (selected !== undefined) {
+      return;
+    }
+    setSelected(dataset.datasets?.map((_ref4, index) => {
+      let {
+        id
+      } = _ref4;
+      return `${id}${index}`;
+    }));
+  }, [dataset.datasets, selected]);
+  const localColors = getLegendColor(theme);
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      style: {
+        height
+      },
+      children: jsx(ResponsiveLine, {
+        colors: localColors,
+        data: finalData ?? [],
+        margin: margin,
+        xScale: xScale,
+        yScale: {
+          max: getMaxChartValue(finalData),
+          min: getMinChartValue(finalData),
+          ...yScale
+        },
+        xFormat: pointFormatters?.x,
+        yFormat: pointFormatters?.y,
+        axisBottom: {
+          format: axisFormatters?.bottom,
+          tickPadding: 5,
+          tickRotation: 0,
+          tickSize: 5,
+          tickValues: tickValues?.bottom
+        },
+        axisLeft: {
+          format: axisFormatters?.left,
+          tickPadding: 5,
+          tickRotation: 0,
+          tickSize: 5,
+          tickValues: tickValues?.left
+        },
+        pointSize: 10,
+        useMesh: true,
+        theme: chartTheme,
+        curve: "monotoneX",
+        tooltip: LineChartTooltip,
+        "data-testid": dataTestId,
+        ...chartProps
+      })
+    }), withLegend && jsx(CustomLegend, {
+      data: dataset.datasets,
+      selected: selected ?? [],
+      setSelected: setSelected,
+      axisTransformer: axisFormatters?.left
+    })]
+  });
+};
+
+export { LineChart };

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

@@ -0,0 +1,159 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import recursivelyGetChildrenString from '../../helpers/recursivelyGetChildrenString.js';
+import capitalize from '../../utils/capitalize.js';
+import { Icon } from '../Icon/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const StyledIcon = /*#__PURE__*/_styled(Icon, {
+  target: "e1afnb7a2"
+})();
+const PROMINENCES = {
+  default: '',
+  weak: 'weak',
+  strong: 'strong'
+};
+const ICON_SIZE = 16;
+const BLANK_TARGET_ICON_SIZE = 14;
+const TRANSITION_DURATION = 250;
+const StyledExternalIconContainer = /*#__PURE__*/_styled("span", {
+  target: "e1afnb7a1"
+})("display:inline-flex;padding-bottom:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['0.5'];
+}, ";");
+const StyledLink = /*#__PURE__*/_styled('a', {
+  shouldForwardProp: prop => !['sentiment', 'iconPosition', 'as', 'oneLine'].includes(prop),
+  target: "e1afnb7a0"
+})("background-color:transparent;border:none;padding:0;color:", _ref2 => {
+  let {
+    theme,
+    sentiment,
+    prominence
+  } = _ref2;
+  const definedProminence = capitalize(PROMINENCES[prominence ?? 'default']);
+  theme.colors[sentiment];
+  const text = `text${definedProminence}`;
+  return theme.colors[sentiment]?.[text] ?? theme.colors.neutral.text;
+}, ";text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:transparent;display:inline-flex;flex-direction:row;align-items:center;transition:text-decoration-color ", TRANSITION_DURATION, "ms ease-out;", StyledIcon, "{transition:transform ", TRANSITION_DURATION, "ms ease-out;}gap:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['1'];
+}, ";position:relative;cursor:pointer;>*{pointer-events:none;}", _ref4 => {
+  let {
+    oneLine
+  } = _ref4;
+  return oneLine ? `white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;` : 'width: fit-content;';
+}, " ", _ref5 => {
+  let {
+    size,
+    theme
+  } = _ref5;
+  const variant = size === 'small' ? 'bodySmallStrong' : 'bodyStrong';
+  return `
+      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};
+      paragraph-spacing: ${theme.typography[variant].paragraphSpacing};
+      text-case: ${theme.typography[variant].textCase};
+    `;
+}, " &:hover,&:focus{outline:none;text-decoration:underline;text-decoration-thickness:1px;", _ref6 => {
+  let {
+    theme,
+    sentiment,
+    prominence
+  } = _ref6;
+  const definedProminence = capitalize(PROMINENCES[prominence ?? 'default']);
+  theme.colors[sentiment];
+  const text = `text${definedProminence}`;
+  return `
+        color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.text};
+        text-decoration-color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.text};`;
+}, ";", StyledIcon, "{transform:", _ref7 => {
+  let {
+    theme,
+    iconPosition
+  } = _ref7;
+  return iconPosition === 'left' ? `translate(${theme.space['0.5']}, 0)` : `translate(-${theme.space['0.5']}, 0)`;
+}, ";}}&:hover::after,&:focus::after{background-color:", _ref8 => {
+  let {
+    theme,
+    sentiment
+  } = _ref8;
+  return theme.colors[sentiment]?.text ?? theme.colors.neutral.text;
+}, ";}&:active{text-decoration-thickness:2px;}");
+const Link = /*#__PURE__*/forwardRef((_ref9, ref) => {
+  let {
+    children,
+    href,
+    target,
+    download,
+    sentiment = 'info',
+    prominence,
+    size = 'large',
+    iconPosition,
+    rel,
+    className,
+    onClick,
+    'aria-label': ariaLabel,
+    oneLine = false,
+    'data-testid': dataTestId
+  } = _ref9;
+  const isBlank = target === '_blank';
+  const computedRel = rel || (isBlank ? 'noopener noreferrer' : undefined);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const elementRef = useRef(null);
+  const usedRef = ref ?? elementRef;
+  const finalStringChildren = recursivelyGetChildrenString(children);
+  useEffect(() => {
+    if (oneLine && usedRef && usedRef.current) {
+      const {
+        offsetWidth,
+        scrollWidth
+      } = usedRef.current;
+      setIsTruncated(offsetWidth < scrollWidth);
+    }
+  }, [oneLine, ref, usedRef]);
+  return jsx(Tooltip, {
+    text: oneLine && isTruncated ? finalStringChildren : '',
+    children: jsxs(StyledLink, {
+      href: href,
+      target: target,
+      download: download,
+      ref: usedRef,
+      sentiment: sentiment,
+      prominence: prominence,
+      rel: computedRel,
+      className: className,
+      size: size,
+      onClick: onClick,
+      iconPosition: iconPosition,
+      "aria-label": ariaLabel,
+      oneLine: oneLine,
+      "data-testid": dataTestId,
+      children: [!isBlank && iconPosition === 'left' ? jsx(StyledIcon, {
+        name: "arrow-left",
+        size: ICON_SIZE
+      }) : null, children, isBlank ? jsx(StyledExternalIconContainer, {
+        children: jsx(StyledIcon, {
+          name: "open-in-new",
+          size: BLANK_TARGET_ICON_SIZE
+        })
+      }) : null, !isBlank && iconPosition === 'right' ? jsx(StyledIcon, {
+        name: "arrow-right",
+        size: ICON_SIZE
+      }) : null]
+    })
+  });
+});
+
+export { Link, PROMINENCES };

package/dist/src/components/List/Body.js

@@ -0,0 +1,22 @@
+import _styled from '@emotion/styled/base';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledBody = /*#__PURE__*/_styled("div", {
+  target: "e1wm4no70"
+})("display:flex;flex-direction:column;gap:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['2'];
+}, ";");
+const Body = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return jsx(StyledBody, {
+    role: "rowgroup",
+    children: children
+  });
+};
+
+export { Body };

package/dist/src/components/List/Cell.js

@@ -0,0 +1,38 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef } from 'react';
+import { 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 StyledCell = /*#__PURE__*/_styled("div", {
+  target: "e1e6rck40"
+})(process.env.NODE_ENV === "production" ? {
+  name: "humxtf",
+  styles: "display:flex;justify-content:center;flex-direction:column;min-height:60px"
+} : {
+  name: "humxtf",
+  styles: "display:flex;justify-content:center;flex-direction:column;min-height:60px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Cell = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    preventClick,
+    'data-testid': dataTestid
+  } = _ref;
+  const handleClick = event => {
+    if (preventClick) {
+      event.stopPropagation();
+    }
+  };
+  return jsx(StyledCell, {
+    ref: ref,
+    role: "cell",
+    className: className,
+    onClick: handleClick,
+    "data-testid": dataTestid,
+    children: children
+  });
+});
+
+export { Cell };