@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,366 @@
+import _styled from '@emotion/styled/base';
+import { useRef, useId, useState, useMemo } from 'react';
+import { Button } from '../Button/index.js';
+import { Icon } from '../Icon/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { getMinusRoundedValue, getPlusRoundedValue, roundStep, bounded } from './helpers.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const containerSizes = {
+  large: 48,
+  medium: 40,
+  small: 32
+};
+const iconSizes = {
+  large: 26,
+  medium: 24,
+  small: 22
+};
+const BASE_INPUT_WIDTH = 34;
+const StyledSelectButton = /*#__PURE__*/_styled(Button, {
+  target: "exvap484"
+})("margin:0 ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";width:32px;height:32px;");
+const StyledCenterBox = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['size'].includes(prop),
+  target: "exvap483"
+})("display:flex;flex:1;flex-direction:row;height:", _ref2 => {
+  let {
+    size
+  } = _ref2;
+  return size === 'small' ? '24px' : '32px';
+}, ";align-items:center;outline:none;justify-content:center;border-radius:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.radii.default;
+}, ";border:1px solid transparent;max-width:100%;");
+const StyledInput = /*#__PURE__*/_styled("input", {
+  target: "exvap482"
+})("color:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.text;
+}, ";background-color:transparent;font-size:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.typography.bodyStrong.fontSize;
+}, ";border:none;outline:none;position:relative;margin-right:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space['0.5'];
+}, ";max-width:100%;font-weight:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.typography.bodyStrong.weight;
+}, ";text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}::placeholder{color:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.neutral.textWeak;
+}, ";}-moz-appearance:textfield;&[disabled]{color:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral.textDisabled;
+}, ";cursor:not-allowed;}");
+const StyledText = /*#__PURE__*/_styled('span', {
+  shouldForwardProp: prop => !['disabled'].includes(prop),
+  target: "exvap481"
+})("color:", _ref10 => {
+  let {
+    theme,
+    disabled
+  } = _ref10;
+  return disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text;
+}, ";user-select:none;margin-right:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space['1'];
+}, ";");
+const StyledContainer = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['size'].includes(prop),
+  target: "exvap480"
+})("background-color:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.neutral.backgroundWeak;
+}, ";display:flex;flex-direction:row;align-items:center;align-self:stretch;font-weight:500;height:", _ref13 => {
+  let {
+    size
+  } = _ref13;
+  return containerSizes[size];
+}, "px;border:1px solid ", _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colors.neutral.borderWeak;
+}, ";border-radius:", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.radii.default;
+}, ";&[data-error='true']{border:1px solid ", _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.colors.danger.borderWeak;
+}, ";}&[aria-disabled='true']{background:", _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.neutral.backgroundDisabled;
+}, ";cursor:not-allowed;}&:not([aria-disabled='true']){", StyledCenterBox, ":hover,", StyledCenterBox, ":focus{border:1px solid ", _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.colors.primary.borderWeakHover;
+}, ";}", StyledCenterBox, ":focus-within{box-shadow:", _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.shadows.focusPrimary;
+}, ";border:1px solid ", _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.colors.primary.borderWeakHover;
+}, ";}}");
+const NumberInput = _ref21 => {
+  let {
+    disabled = false,
+    maxValue,
+    minValue = 0,
+    name = 'numberinput',
+    onChange,
+    onFocus,
+    onBlur,
+    onMaxCrossed,
+    onMinCrossed,
+    size = 'large',
+    step = 1,
+    text,
+    defaultValue,
+    value,
+    disabledTooltip,
+    className,
+    label,
+    id,
+    placeholder,
+    error,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'data-testid': dataTestId
+  } = _ref21;
+  const inputRef = useRef();
+  const uniqueId = useId();
+
+  // local state used if component is not controlled (no value prop provided)
+  const [inputValue, setInputValue] = useState(() => {
+    if (defaultValue && minValue && defaultValue < minValue) {
+      return minValue;
+    }
+    if (defaultValue && maxValue && defaultValue > maxValue) {
+      return maxValue;
+    }
+    return defaultValue;
+  });
+  const currentValue = value !== undefined ? value : inputValue;
+  const setValue = function (newValue,
+  /**
+   * If true, will check if newValue is between minValue and maxValue and set it to minValue or maxValue if it's not.
+   */
+  hasMinMaxVerification) {
+    if (hasMinMaxVerification === void 0) {
+      hasMinMaxVerification = true;
+    }
+    if (value === undefined) {
+      if (hasMinMaxVerification) {
+        if (newValue !== undefined && newValue < minValue) {
+          setInputValue(minValue);
+          return;
+        }
+        if (newValue !== undefined && maxValue !== undefined && newValue > maxValue) {
+          setInputValue(maxValue);
+          return;
+        }
+      }
+      setInputValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+  const offsetFn = direction => () => {
+    const localValue = currentValue ?? 0;
+    const newValue = localValue % step === 0 ? localValue + step * direction : localValue;
+    const roundedValue = roundStep(newValue, step, direction);
+    setValue(roundedValue);
+  };
+  const handleChange = event => {
+    setValue(event.currentTarget.value ? Number(event.currentTarget.value) : undefined, false);
+  };
+  const handleOnFocus = event => {
+    if (onFocus) onFocus(event);
+  };
+  const handleOnBlur = event => {
+    if (currentValue) {
+      const boundedValue = bounded(currentValue, minValue ?? currentValue, maxValue ?? currentValue);
+      if (maxValue && currentValue > maxValue) onMaxCrossed?.();
+      if (minValue && currentValue < minValue) onMinCrossed?.();
+      setValue(boundedValue);
+      onBlur?.(event);
+    }
+  };
+  const onKeyDown = event => {
+    if (event.key === 'ArrowUp') {
+      event.stopPropagation();
+      event.preventDefault();
+      const direction = 1;
+      const localValue = currentValue ?? 0;
+      const newValue = localValue % step === 0 ? localValue + step * direction : localValue;
+      const roundedValue = roundStep(newValue, step, direction);
+      if (maxValue === undefined) {
+        setValue(roundedValue);
+        return;
+      }
+      setValue(Math.min(roundedValue, maxValue));
+    }
+    if (event.key === 'ArrowDown') {
+      event.stopPropagation();
+      event.preventDefault();
+      const direction = -1;
+      const localValue = currentValue ?? 0;
+      const newValue = localValue % step === 0 ? localValue + step * direction : localValue;
+      const roundedValue = roundStep(newValue, step, direction);
+      setValue(Math.max(roundedValue, minValue));
+    }
+  };
+  const isMinusDisabled = useMemo(() => {
+    if (disabled) return true;
+    if (currentValue === undefined) return false;
+    if (getMinusRoundedValue(currentValue, step) < minValue) {
+      return true;
+    }
+    return disabled;
+  }, [currentValue, disabled, minValue, step]);
+  const isPlusDisabled = useMemo(() => {
+    if (disabled) return true;
+    if (currentValue === undefined) return false;
+    if (maxValue && getPlusRoundedValue(currentValue, step) > maxValue) {
+      return true;
+    }
+    return disabled;
+  }, [currentValue, disabled, maxValue, step]);
+  const inputWidth = useMemo(() => {
+    if (placeholder && currentValue === undefined) {
+      return placeholder.length * 12;
+    }
+    if (currentValue !== undefined) {
+      return currentValue.toString().length * 16;
+    }
+    return BASE_INPUT_WIDTH;
+  }, [currentValue, placeholder]);
+  return jsxs(Stack, {
+    gap: 1,
+    children: [label ? jsx(Text, {
+      variant: "bodyStrong",
+      as: "label",
+      htmlFor: id || uniqueId,
+      children: label
+    }) : null, jsxs(Stack, {
+      gap: 0.5,
+      children: [jsxs(StyledContainer, {
+        "aria-disabled": disabled,
+        "data-error": !!error,
+        size: size,
+        className: className,
+        "data-testid": dataTestId,
+        children: [jsx(Tooltip, {
+          text: isMinusDisabled && disabledTooltip,
+          children: jsx(StyledSelectButton, {
+            onClick: offsetFn(-1),
+            disabled: isMinusDisabled,
+            "aria-label": "Minus",
+            type: "button",
+            variant: "ghost",
+            sentiment: "primary",
+            size: "small",
+            children: jsx(Icon, {
+              name: "minus",
+              size: iconSizes[size],
+              color: "primary",
+              disabled: isMinusDisabled
+            })
+          })
+        }), jsxs(StyledCenterBox, {
+          size: size,
+          onClick: () => {
+            if (inputRef?.current) {
+              inputRef.current.focus();
+            }
+          },
+          "aria-live": "assertive",
+          role: "status",
+          children: [jsx(StyledInput, {
+            disabled: disabled,
+            name: name,
+            onBlur: handleOnBlur,
+            onChange: handleChange,
+            onFocus: handleOnFocus,
+            onKeyDown: onKeyDown,
+            ref: inputRef,
+            style: {
+              width: inputWidth
+            },
+            value: currentValue !== undefined ? currentValue.toString() : undefined // A dom element can only have string attributes.
+            ,
+            type: "number",
+            id: id || uniqueId,
+            "aria-label": !label && !ariaLabel ? 'Number Input' : ariaLabel,
+            "aria-describedby": ariaDescribedBy,
+            placeholder: placeholder
+          }), currentValue !== undefined ? jsx(StyledText, {
+            disabled: disabled,
+            children: text
+          }) : null]
+        }), jsx(Tooltip, {
+          text: isPlusDisabled && disabledTooltip,
+          children: jsx(StyledSelectButton, {
+            onClick: offsetFn(1),
+            disabled: isPlusDisabled,
+            "aria-label": "Plus",
+            type: "button",
+            variant: "ghost",
+            sentiment: "primary",
+            size: "small",
+            children: jsx(Icon, {
+              name: "plus",
+              size: iconSizes[size],
+              color: "primary",
+              disabled: isPlusDisabled
+            })
+          })
+        })]
+      }), typeof error === 'string' ? jsx(Text, {
+        as: "span",
+        variant: "bodySmall",
+        color: "danger",
+        prominence: "weak",
+        children: error
+      }) : null]
+    })]
+  });
+};
+
+export { NumberInput };

package/dist/src/components/Pagination/getPageNumbers.js

@@ -0,0 +1,32 @@
+/**
+ * Return a list of page numbers around the currentPage
+ * @param currentPage The current page
+ * @param pageCount The last page number
+ * @param range The number of pages wanted
+ * @returns List of page numbers around currentPage
+ */
+const getPageNumbers = function (currentPage, pageCount, range) {
+  if (range === void 0) {
+    range = 5;
+  }
+  const gap = Math.floor(range / 2);
+  let end = currentPage + gap;
+  let remaining = 0;
+  if (end > pageCount) {
+    remaining = end - pageCount;
+    end = pageCount;
+  }
+  let start = currentPage - gap - remaining;
+  if (start < 1) {
+    remaining = Math.abs(start - 1);
+    start = 1;
+  }
+  if (end < pageCount) {
+    end = Math.min(end + remaining, pageCount);
+  }
+  return Array.from({
+    length: end - start + 1
+  }, (_, index) => start + index);
+};
+
+export { getPageNumbers };

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

@@ -0,0 +1,118 @@
+import _styled from '@emotion/styled/base';
+import { useCallback, useMemo } from 'react';
+import { Button } from '../Button/index.js';
+import { getPageNumbers } from './getPageNumbers.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 PageNumbersContainer = /*#__PURE__*/_styled("div", {
+  target: "e5s692s2"
+})("display:flex;gap:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['2'];
+}, ";margin:0 ", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";");
+const PageSwitchContainer = /*#__PURE__*/_styled("div", {
+  target: "e5s692s1"
+})("display:flex;gap:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['1'];
+}, ";");
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "e5s692s0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "zjik7",
+  styles: "display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+/**
+ * Display multiple buttons to allow navigation between a paginated resource
+ */
+const Pagination = _ref4 => {
+  let {
+    disabled = false,
+    page,
+    pageCount,
+    onChange,
+    pageTabCount = 5,
+    className,
+    'data-testid': dataTestId
+  } = _ref4;
+  const goToFirstPage = useCallback(() => {
+    onChange(1);
+  }, [onChange]);
+  const goToLastPage = useCallback(() => {
+    onChange(pageCount);
+  }, [onChange, pageCount]);
+  const goToNextPage = useCallback(() => {
+    onChange(page + 1);
+  }, [onChange, page]);
+  const goToPreviousPage = useCallback(() => {
+    onChange(page - 1);
+  }, [onChange, page]);
+  const pageNumbersToDisplay = useMemo(() => pageCount > 1 ? getPageNumbers(page, pageCount, pageTabCount) : [1], [page, pageCount, pageTabCount]);
+  const handlePageClick = useCallback(pageNumber => () => {
+    onChange(pageNumber);
+  }, [onChange]);
+  return jsxs(StyledContainer, {
+    className: className,
+    "data-testid": dataTestId,
+    children: [jsxs(PageSwitchContainer, {
+      children: [jsx(Button, {
+        "aria-label": "First",
+        disabled: page <= 1 || disabled,
+        variant: "outlined",
+        sentiment: "primary",
+        onClick: goToFirstPage,
+        icon: "arrow-left-double"
+      }), jsx(Button, {
+        "aria-label": "Back",
+        disabled: page <= 1 || disabled,
+        variant: "outlined",
+        sentiment: "primary",
+        onClick: goToPreviousPage,
+        icon: "arrow-left"
+      })]
+    }), jsx(PageNumbersContainer, {
+      children: pageNumbersToDisplay.map(pageNumber => jsx(Button, {
+        "aria-label": `Page ${pageNumber}`,
+        "aria-current": pageNumber === page,
+        disabled: disabled,
+        variant: "outlined",
+        sentiment: pageNumber === page ? 'primary' : 'neutral',
+        onClick: handlePageClick(pageNumber),
+        type: "button",
+        children: pageNumber
+      }, `pagination-page-${pageNumber}`))
+    }), jsxs(PageSwitchContainer, {
+      children: [jsx(Button, {
+        "aria-label": "Next",
+        disabled: page >= pageCount || disabled,
+        variant: "outlined",
+        sentiment: "primary",
+        onClick: goToNextPage,
+        icon: "arrow-right"
+      }), jsx(Button, {
+        "aria-label": "Last",
+        disabled: page >= pageCount || disabled,
+        variant: "outlined",
+        sentiment: "primary",
+        onClick: goToLastPage,
+        icon: "arrow-right-double"
+      })]
+    })]
+  });
+};
+
+export { Pagination };

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

@@ -0,0 +1,42 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '../Icon/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const PasswordCheckContainer = /*#__PURE__*/_styled("div", {
+  target: "eunxap90"
+})("display:grid;grid-template-columns:repeat(2, 1fr);gap:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";");
+const PasswordCheck = _ref2 => {
+  let {
+    rules,
+    className,
+    'data-testid': dataTestId
+  } = _ref2;
+  return jsx(PasswordCheckContainer, {
+    className: className,
+    "data-testid": dataTestId,
+    children: rules.map(rule => jsxs(Stack, {
+      direction: "row",
+      gap: 1,
+      alignItems: "center",
+      children: [jsx(Icon, {
+        name: rule.valid ? 'checkbox-circle-outline' : 'close-circle-outline',
+        color: rule.valid ? 'success' : 'neutral',
+        prominence: "weak",
+        size: 20
+      }), jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        children: rule.text
+      })]
+    }, rule.name))
+  });
+};
+
+export { PasswordCheck };

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

@@ -0,0 +1,116 @@
+import _styled from '@emotion/styled/base';
+import { useTheme } from '@emotion/react';
+import { useState, useCallback, useEffect } from 'react';
+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 StyledTitle = /*#__PURE__*/_styled(Text, {
+  target: "e1uv9umu3"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1gbhlwb",
+  styles: "display:inline-block;vertical-align:top;line-height:22px"
+} : {
+  name: "1gbhlwb",
+  styles: "display:inline-block;vertical-align:top;line-height:22px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledStrength = /*#__PURE__*/_styled(Text, {
+  target: "e1uv9umu2"
+})("float:right;vertical-align:top;color:", _ref => {
+  let {
+    strength
+  } = _ref;
+  return strength.color;
+}, ";");
+const StyledWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1uv9umu1"
+})("background-color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.backgroundDisabled;
+}, ";border-radius:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.radii.default;
+}, ";height:8px;margin-top:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.space['1'];
+}, ";margin-bottom:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.space['2'];
+}, ";");
+const StyledMeter = /*#__PURE__*/_styled("div", {
+  target: "e1uv9umu0"
+})("border-radius:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.radii.default;
+}, ";height:100%;transition:all 0.5s;");
+const DEFAULT_ESTIMATE = () => ({
+  score: 0
+});
+const DEFAULT_FORBIDDEN_WORDS = [];
+const PasswordStrengthMeter = _ref7 => {
+  let {
+    password = '',
+    onChange,
+    strength,
+    title,
+    estimate = DEFAULT_ESTIMATE,
+    forbiddenInputs = DEFAULT_FORBIDDEN_WORDS,
+    className,
+    'data-testid': dataTestId
+  } = _ref7;
+  const [score, setScore] = useState(0);
+  const theme = useTheme();
+  const [backgroundColor, setBackgroundColor] = useState(strength[0]?.color || theme.colors.success.backgroundStrong);
+  const [width, setWidth] = useState(0);
+  const getScore = useCallback(async passwordToTest => {
+    const {
+      score: internalScore = 0
+    } = await estimate(passwordToTest || '', forbiddenInputs);
+    return internalScore;
+  }, [estimate, forbiddenInputs]);
+  const handleChange = useCallback(e => onChange?.(e), [onChange]);
+  useEffect(() => {
+    setBackgroundColor(strength[score].color);
+    handleChange(score);
+    getScore(password).then(s => setScore(s)).catch(null);
+    const toValue = (score + 1) / strength.length * 100;
+    setWidth(`${toValue}%`);
+  }, [getScore, handleChange, password, score, strength]);
+  return jsxs("div", {
+    title: title,
+    role: "alert",
+    "aria-live": "polite",
+    className: className,
+    "data-testid": dataTestId,
+    children: [jsx(StyledTitle, {
+      variant: "bodySmallStrong",
+      as: "p",
+      children: title
+    }), jsx(StyledStrength, {
+      as: "span",
+      variant: "bodySmallStrong",
+      strength: strength[score],
+      children: strength[score]?.t
+    }), jsx(StyledWrapper, {
+      children: jsx(StyledMeter, {
+        style: {
+          backgroundColor,
+          width
+        }
+      })
+    })]
+  });
+};
+
+export { PasswordStrengthMeter };