@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,203 @@
+import _styled from '@emotion/styled/base';
+import { useId, useState, createRef } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledInput = /*#__PURE__*/_styled("input", {
+  target: "e1a2bx9q0"
+})("background:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.backgroundWeak;
+}, ";border:solid 1px ", _ref2 => {
+  let {
+    'aria-invalid': error,
+    theme
+  } = _ref2;
+  return error ? theme.colors.danger.borderWeak : theme.colors.neutral.borderWeak;
+}, ";font-size:24px;color:", _ref3 => {
+  let {
+    'aria-invalid': error,
+    theme
+  } = _ref3;
+  return error ? theme.colors.danger.textWeak : theme.colors.neutral.text;
+}, ";text-align:center;border-radius:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.radii.default;
+}, ";margin-right:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.space['1'];
+}, ";width:56px;height:64px;outline-style:none;transition:border-color 0.2s ease,box-shadow 0.2s ease;&:hover,&:focus{border-color:", _ref6 => {
+  let {
+    'aria-invalid': error,
+    theme
+  } = _ref6;
+  return error ? theme.colors.danger.borderWeakHover : theme.colors.primary.borderWeakHover;
+}, ";}&:focus{box-shadow:", _ref7 => {
+  let {
+    'aria-invalid': error,
+    theme: {
+      shadows
+    }
+  } = _ref7;
+  return error ? shadows.focusDanger : shadows.focusPrimary;
+}, ";}&:last-child{margin-right:0;}&::placeholder{color:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.neutral.textWeak;
+}, ";}");
+const KEY_CODE = {
+  backspace: 8,
+  down: 40,
+  left: 37,
+  right: 39,
+  up: 38
+};
+const DEFAULT_ON_FUNCTION = () => {};
+const VerificationCode = _ref9 => {
+  let {
+    disabled = false,
+    className,
+    error = false,
+    fields = 4,
+    initialValue = '',
+    inputId,
+    inputStyle = '',
+    onChange = DEFAULT_ON_FUNCTION,
+    onComplete = DEFAULT_ON_FUNCTION,
+    placeholder = '',
+    required = false,
+    type = 'number',
+    'data-testid': dataTestId,
+    'aria-label': ariaLabel = 'Verification code'
+  } = _ref9;
+  const uniqueId = useId();
+  const valuesArray = Object.assign(new Array(fields).fill(''), initialValue.substring(0, fields).split(''));
+  const [values, setValues] = useState(valuesArray);
+  const inputRefs = Array.from({
+    length: fields
+  }, () => /*#__PURE__*/createRef());
+  const triggerChange = inputValues => {
+    const stringValue = inputValues.join('');
+    if (onChange) {
+      onChange(stringValue);
+    }
+    if (onComplete && stringValue.length >= fields) {
+      onComplete(stringValue);
+    }
+  };
+  const inputOnChange = index => event => {
+    let {
+      value
+    } = event.target;
+    if (type === 'number') {
+      value = event.target.value.replace(/[^\d]/gi, '');
+    }
+    const newValues = [...values];
+    if (value === '' || type === 'number' && !new RegExp(event.target.pattern).test(value)) {
+      newValues[index] = '';
+      setValues(newValues);
+      return;
+    }
+    const sanitizedValue = value[0]; // in case more than 1 char, we just take the first one
+    newValues[index] = sanitizedValue;
+    setValues(newValues);
+    const nextIndex = Math.min(index + 1, fields - 1);
+    const next = inputRefs[nextIndex];
+    next?.current?.focus();
+    triggerChange(newValues);
+  };
+  const inputOnKeyDown = index => event => {
+    const prevIndex = index - 1;
+    const nextIndex = index + 1;
+    const first = inputRefs[0];
+    const last = inputRefs[inputRefs.length - 1];
+    const prev = inputRefs[prevIndex];
+    const next = inputRefs[nextIndex];
+    const vals = [...values];
+    switch (event.keyCode) {
+      case KEY_CODE.backspace:
+        event.preventDefault();
+        if (values[index]) {
+          vals[index] = '';
+          setValues(vals);
+          triggerChange(vals);
+        } else if (prev) {
+          vals[prevIndex] = '';
+          prev?.current?.focus();
+          setValues(vals);
+          triggerChange(vals);
+        }
+        break;
+      case KEY_CODE.left:
+        event.preventDefault();
+        prev?.current?.focus();
+        break;
+      case KEY_CODE.right:
+        event.preventDefault();
+        next?.current?.focus();
+        break;
+      case KEY_CODE.up:
+        event.preventDefault();
+        first?.current?.focus();
+        break;
+      case KEY_CODE.down:
+        event.preventDefault();
+        last?.current?.focus();
+        break;
+    }
+  };
+  const inputOnFocus = event => event.target.select();
+  const inputOnPaste = currentIndex => event => {
+    event.preventDefault();
+    const pastedValue = [...event.clipboardData.getData('Text').split('')].map(copiedValue =>
+    // Replace non number char with empty char when type is number
+    type === 'number' ? copiedValue.replace(/[^\d]/gi, '') : copiedValue);
+
+    // Trim array to avoid array overflow
+    pastedValue.splice(fields - currentIndex < pastedValue.length ? fields - currentIndex : pastedValue.length);
+    setValues(vals => {
+      const newArray = vals.slice();
+      newArray.splice(currentIndex, pastedValue.length, ...pastedValue);
+      return newArray;
+    });
+
+    // we select min value between the end of inputs and valid pasted chars
+    const nextIndex = Math.min(currentIndex + pastedValue.filter(item => item !== '').length, inputRefs.length - 1);
+    const next = inputRefs[nextIndex];
+    next?.current?.focus();
+    triggerChange(pastedValue);
+  };
+  return jsx("div", {
+    className: className,
+    "data-testid": dataTestId,
+    children: values.map((value, index) => jsx(StyledInput, {
+      css: [inputStyle],
+      "aria-invalid": error,
+      type: type === 'number' ? 'tel' : type,
+      pattern: type === 'number' ? '[0-9]*' : undefined
+      // eslint-disable-next-line react/no-array-index-key
+      ,
+
+      "data-testid": index,
+      value: value,
+      id: `${inputId || uniqueId}-${index}`,
+      ref: inputRefs[index],
+      onChange: inputOnChange(index),
+      onKeyDown: inputOnKeyDown(index),
+      onPaste: inputOnPaste(index),
+      onFocus: inputOnFocus,
+      disabled: disabled,
+      required: required,
+      placeholder: placeholder?.[index] ?? '',
+      "aria-label": `${ariaLabel} ${index}`
+    }, index))
+  });
+};
+
+export { VerificationCode };

package/dist/src/helpers/isJSON.js

@@ -0,0 +1,11 @@
+const isJSONString = str => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+var isJSONString$1 = isJSONString;
+
+export { isJSONString$1 as default };

package/dist/src/helpers/legend.js

@@ -0,0 +1,13 @@
+const getLegendColor = theme => {
+  const {
+    colors
+  } = theme;
+  return Object.keys(colors.other.data.charts).filter(key => !['success', 'danger'].includes(key)).sort((a, b) => {
+    if (Number(a.replace('data', '')) < Number(b.replace('data', ''))) {
+      return -1;
+    }
+    return 1;
+  }).map(key => colors.other.data.charts[key]);
+};
+
+export { getLegendColor };

package/dist/src/helpers/recursivelyGetChildrenString.js

@@ -0,0 +1,12 @@
+const recursivelyGetChildrenString = children => {
+  if (typeof children === 'string') return children;
+  if (Array.isArray(children)) return ''; // We can't determine which string to display in tooltip
+  if (typeof children === 'object') {
+    const childProps = children?.['props']?.['children'];
+    if (childProps) return recursivelyGetChildrenString(childProps);
+  }
+  return '';
+};
+var recursivelyGetChildrenString$1 = recursivelyGetChildrenString;
+
+export { recursivelyGetChildrenString$1 as default };

package/dist/src/index.js

@@ -0,0 +1,63 @@
+export { extendTheme } from './theme/index.js';
+export { consoleDarkTheme as darkTheme, consoleLightTheme as theme } from '@ultraviolet/themes';
+export { bounce, fadeIn, fadeOut, flash, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, unfoldIn, unfoldOut, zoomIn, zoomOut } from './utils/animations.js';
+export { default as Breakpoint } from './utils/responsive/Breakpoint.js';
+export { down, up } from './utils/responsive/utilities.js';
+export { getUUID } from './utils/ids.js';
+export { default as normalize } from './utils/normalize.js';
+export { ActionBar } from './components/ActionBar/index.js';
+export { Alert } from './components/Alert/index.js';
+export { Avatar } from './components/Avatar/index.js';
+export { Badge } from './components/Badge/index.js';
+export { BarChart } from './components/BarChart/index.js';
+export { BarStack } from './components/BarStack/index.js';
+export { Breadcrumbs } from './components/Breadcrumbs/index.js';
+export { Banner } from './components/Banner/index.js';
+export { Bullet } from './components/Bullet/index.js';
+export { Checkbox } from './components/Checkbox/index.js';
+export { CopyButton } from './components/CopyButton/index.js';
+export { DateInput } from './components/DateInput/index.js';
+export { Expandable } from './components/Expandable/index.js';
+export { EmptyState } from './components/EmptyState/index.js';
+export { Icon } from './components/Icon/index.js';
+export { LineChart } from './components/LineChart/index.js';
+export { Link } from './components/Link/index.js';
+export { List } from './components/List/index.js';
+export { Loader } from './components/Loader/index.js';
+export { Menu } from './components/Menu/index.js';
+export { Modal } from './components/Modal/index.js';
+export { Notice } from './components/Notice/index.js';
+export { Pagination } from './components/Pagination/index.js';
+export { PasswordCheck } from './components/PasswordCheck/index.js';
+export { PasswordStrengthMeter } from './components/PasswordStrengthMeter/index.js';
+export { PieChart } from './components/PieChart/index.js';
+export { Skeleton } from './components/Skeleton/index.js';
+export { ProgressBar } from './components/ProgressBar/index.js';
+export { Radio } from './components/Radio/index.js';
+export { SelectInput } from './components/SelectInput/index.js';
+export { SelectableCard } from './components/SelectableCard/index.js';
+export { NumberInput } from './components/NumberInput/index.js';
+export { Separator } from './components/Separator/index.js';
+export { Carousel } from './components/Carousel/index.js';
+export { Snippet } from './components/Snippet/index.js';
+export { Stack } from './components/Stack/index.js';
+export { Status } from './components/Status/index.js';
+export { StepList } from './components/StepList/index.js';
+export { Stepper } from './components/Stepper/index.js';
+export { SwitchButton } from './components/SwitchButton/index.js';
+export { Table } from './components/Table/index.js';
+export { Tabs } from './components/Tabs/index.js';
+export { Tag } from './components/Tag/index.js';
+export { TagInput } from './components/TagInput/index.js';
+export { TagList } from './components/TagList/index.js';
+export { Text } from './components/Text/index.js';
+export { TextInput } from './components/TextInput/index.js';
+export { TimeInput } from './components/TimeInput/index.js';
+export { ToastContainer, toast } from './components/Toaster/index.js';
+export { Toggle } from './components/Toggle/index.js';
+export { Tooltip } from './components/Tooltip/index.js';
+export { VerificationCode } from './components/VerificationCode/index.js';
+export { Row } from './components/Row/index.js';
+export { Button } from './components/Button/index.js';
+export { Card } from './components/Card/index.js';
+export { Popover } from './components/Popover/index.js';

package/dist/src/theme/index.js

@@ -0,0 +1,25 @@
+import { consoleLightTheme } from '@ultraviolet/themes';
+export { consoleDarkTheme as darkTheme, consoleLightTheme as default } from '@ultraviolet/themes';
+import deepmerge from 'deepmerge';
+
+const {
+  colors,
+  shadows,
+  typography,
+  space,
+  radii,
+  screens
+} = consoleLightTheme;
+/**
+ * Will extend theme with new theme properties
+ * @param {SCWUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
+ * @param {RecursivePartial<SCWUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
+ */
+const extendTheme = extendedTheme => deepmerge(consoleLightTheme, extendedTheme);
+
+// This type exclude overlay and secondary color
+
+const SENTIMENTS = ['primary', 'neutral', 'success', 'danger', 'warning', 'info'];
+const SENTIMENTS_WITHOUT_NEUTRAL = /*#__PURE__*/SENTIMENTS.filter(sentiment => sentiment !== 'neutral');
+
+export { SENTIMENTS, SENTIMENTS_WITHOUT_NEUTRAL, colors, extendTheme, radii, screens, shadows, space, typography };

package/dist/src/utils/animations.js

@@ -0,0 +1,250 @@
+import { keyframes } from '@emotion/react';
+
+const bounce = keyframes`
+    from, 20%, 53%, 80%, to {
+      transform: translate3d(0,0,0);
+    }
+
+    40%, 43% {
+      transform: translate3d(0, -30px, 0);
+    }
+
+    70% {
+      transform: translate3d(0, -15px, 0);
+    }
+
+    90% {
+      transform: translate3d(0,-4px,0);
+    }
+`;
+const ping = keyframes`
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+`;
+const flash = keyframes`
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.1;
+    }
+    100% {
+      opacity: 1;
+    }
+`;
+const zoomIn = keyframes`
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+`;
+const zoomOut = keyframes`
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+`;
+const unfoldIn = keyframes`
+    0% {
+      transform:scaleY(.005) scaleX(0);
+    }
+    50% {
+      transform:scaleY(.005) scaleX(1);
+    }
+    100% {
+      transform:scaleY(1) scaleX(1);
+    }
+`;
+const unfoldOut = keyframes`
+    0% {
+      transform:scaleY(1) scaleX(1);
+    }
+    50% {
+      transform:scaleY(.005) scaleX(1);
+    }
+    100% {
+      transform:scaleY(.005) scaleX(0);
+    }
+`;
+const fadeIn = keyframes`
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+`;
+const fadeOut = keyframes`
+    0% {
+      background:rgba(0,0,0,.4);
+    }
+    100% {
+      background:rgba(0,0,0,.0);
+    }
+`;
+const scaleUp = keyframes`
+    0% {
+      transform:scale(.8) translateY(1000px);
+      opacity:0;
+    }
+    100% {
+      transform:scale(1) translateY(0px);
+      opacity:1;
+    }
+`;
+const scaleDown = keyframes`
+    0% {
+      transform:scale(1) translateY(0px);
+      opacity:1;
+    }
+    100% {
+      transform:scale(.8) translateY(1000px);
+      opacity:0;
+    }
+`;
+const quickScaleDown = keyframes`
+    0% {
+      transform:scale(1);
+    }
+    99.9% {
+      transform:scale(1);
+    }
+    100% {
+      transform:scale(0);
+    }
+`;
+const scaleBack = keyframes`
+    0% {
+      transform:scale(1);
+    }
+    100% {
+      transform:scale(.85);
+    }
+`;
+const scaleForward = keyframes`
+    0% {
+        transform:scale(.85);
+    }
+    100% {
+        transform:scale(1);
+    }
+`;
+const sketchIn = keyframes`
+    0% {
+      stroke-dashoffset: 778;
+    }
+    100% {
+      stroke-dashoffset: 0;
+    }
+`;
+const sketchOut = keyframes`
+    0% {
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dashoffset: 778;
+    }
+`;
+const slideDownLarge = keyframes`
+    0% {
+      transform:translateY(-100%);
+    }
+    100% {
+      transform:translateY(0%);
+    }
+  `;
+const slideUpLarge = keyframes`
+    0% {
+      transform:translateY(0%);
+    }
+    100% {
+      transform:translateY(-100%);
+    }
+  `;
+const slideFromBottom = keyframes`
+    0% {
+      transform:translateY(+100%);
+    }
+    100% {
+      transform:translateY(0%);
+    }
+  `;
+const slideFromTop = keyframes`
+    0% {
+      transform:translateY(-100%);
+    }
+    100% {
+      transform:translateY(0%);
+    }
+  `;
+const slideFromRight = keyframes`
+    0% {
+      transform:translateX(+100%);
+    }
+    100% {
+      transform:translateX(0%);
+    }
+  `;
+const slideFromLeft = keyframes`
+    0% {
+      transform:translateX(-100%);
+    }
+    100% {
+      transform:translateX(0%);
+    }
+  `;
+const slideToBottom = keyframes`
+    0% {
+      transform:translateY(0%);
+    }
+    100% {
+      transform:translateY(+100%);
+    }
+  `;
+const slideToTop = keyframes`
+    0% {
+      transform:translateY(0%);
+    }
+    100% {
+      transform:translateY(-100%);
+    }
+  `;
+const slideToRight = keyframes`
+    0% {
+      transform:translateX(0%);
+    }
+    100% {
+      transform:translateX(+100%);
+    }
+  `;
+const slideToLeft = keyframes`
+    0% {
+      transform:translateX(0%);
+    }
+    100% {
+      transform:translateX(-100%);
+    }
+  `;
+const pulse = keyframes`
+    0% {
+      opacity: 0;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.15);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+`;
+
+export { bounce, fadeIn, fadeOut, flash, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, unfoldIn, unfoldOut, zoomIn, zoomOut };

package/dist/src/utils/capitalize.js

@@ -0,0 +1,4 @@
+const capitalize = value => value.charAt(0).toUpperCase() + value.slice(1);
+var capitalize$1 = capitalize;
+
+export { capitalize$1 as default };

package/dist/src/utils/ids.js

@@ -0,0 +1,12 @@
+const chr4 = () => Math.random().toString(16).slice(-4);
+const uuid = () => Array.from({
+  length: 8
+}, chr4).join('');
+const getUUID = function (prefix) {
+  if (prefix === void 0) {
+    prefix = '';
+  }
+  return `${prefix ? `${prefix}-` : ''}${uuid()}`;
+};
+
+export { getUUID };

package/dist/src/utils/normalize.js

@@ -0,0 +1,36 @@
+const modernNormalize = `
+  /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+  *,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
+`;
+const normalize = () => `
+  ${modernNormalize}
+
+  html {
+    font-size: 16px;
+    line-height: 1.5;
+    -webkit-tap-highlight-color: transparent;
+    margin: 0;
+  }
+
+  body {
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  img,
+  canvas,
+  iframe,
+  video,
+  select,
+  textarea {
+    max-width: 100%;
+  }
+
+  p, h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+  }
+`;
+var normalize$1 = normalize;
+
+export { normalize$1 as default };

package/dist/src/utils/responsive/Breakpoint.js

@@ -0,0 +1,12 @@
+import _styled from '@emotion/styled/base';
+import { up, down } from './utilities.js';
+
+const Breakpoint = /*#__PURE__*/_styled("div", {
+  target: "e1ehbeci0"
+})("display:none;", props => `
+    ${props.up ? up(props.up, 'display: block;') : ''}
+    ${props.down ? down(props.down, 'display: block;') : ''}
+  `, ";");
+var Breakpoint$1 = Breakpoint;
+
+export { Breakpoint$1 as default };

package/dist/src/utils/responsive/utilities.js

@@ -0,0 +1,12 @@
+import { screens } from '../../theme/index.js';
+
+const up = (size, rules) => {
+  if (!(size in screens)) return '';
+  return `@media (min-width: ${screens[size]}px) { ${rules} }`;
+};
+const down = (size, rules) => {
+  if (!(size in screens)) return '';
+  return `@media (max-width: ${screens[size] - 1}px) { ${rules} }`;
+};
+
+export { down, up };