@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/NumberInputV2/index.js

@@ -0,0 +1,370 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { forwardRef, useRef, useImperativeHandle, useId, useCallback, useMemo } from "react";
+import { Button } from "../Button/index.js";
+import { Row } from "../Row/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const SIZES = {
+  small: "30px",
+  medium: "38px",
+  large: "46px"
+};
+const SideContainer = styled(Stack)`
+  padding: ${({ theme }) => `${theme.space["0.25"]} ${theme.space["1"]}`};
+
+  &[data-size='small'] {
+    height: ${SIZES.small};
+  }
+
+  &[data-size='medium'] {
+    height: ${SIZES.medium};
+  }
+
+  &[data-size='large'] {
+    height: ${SIZES.large};
+    padding: ${({ theme }) => `${theme.space["0.5"]} ${theme.space["1"]}`};
+  }
+`;
+const InputContainer = styled(Row)`
+  border-width: 0 1px 0 1px;
+  border-style: solid;
+  border-color: inherit;
+  background: inherit;
+  width: 100%;
+`;
+const Unit = styled(Text, {
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  display: flex;
+  align-items: center;
+  padding: ${({ theme }) => theme.space["1"]};
+  height: ${({ size }) => SIZES[size]};
+`;
+const Input = styled.input`
+  outline: none;
+  border: none;
+  padding: 0;
+  width: 100%;
+  color: ${({ theme }) => theme.colors.neutral.text};
+  font-size: ${({ theme }) => theme.typography.body.fontSize};
+  font-family: ${({ theme }) => theme.typography.body.fontFamily};
+  font-weight: ${({ theme }) => theme.typography.body.fontWeight};
+  line-height: ${({ theme }) => theme.typography.body.lineHeight};
+  text-align: center;
+  padding: ${({ theme }) => theme.space["1"]};
+  background: none;
+
+  &[data-has-unit='true'] {
+    text-align: left;
+    padding: ${({ theme }) => `${theme.space["1"]} 0 ${theme.space["1"]} ${theme.space["1"]}`};
+  }
+
+  // Remove native arrows from input[type=number]
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  & {
+    -moz-appearance: textfield;
+  }
+
+  &[data-size='small'] {
+    height: ${SIZES.small};
+  }
+
+  &[data-size='medium'] {
+    height: ${SIZES.medium};
+  }
+
+  &[data-size='large'] {
+    height: ${SIZES.large};
+  }
+
+  &:read-only {
+    color: ${({ theme }) => theme.colors.neutral.text};
+    background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+
+    & ~ ${Unit} {
+      background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+    }
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.neutral.textDisabled};
+    background: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+    cursor: not-allowed;
+
+    & ~ ${Unit} {
+      background: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+      cursor: not-allowed;
+      user-select: none;
+    }
+  }
+
+  &:placeholder-shown ~ ${Unit} {
+    color: ${({ theme }) => theme.colors.neutral.textWeak};
+  }
+`;
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  border-radius: ${({ theme }) => theme.radii.default};
+
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.primary.borderHover};
+    box-shadow: ${({ theme }) => theme.shadows.focusPrimary};
+  }
+
+  &[data-success='true'] {
+    border-color: ${({ theme }) => theme.colors.success.border};
+  }
+
+  &[data-error='true'] {
+    border-color: ${({ theme }) => theme.colors.danger.border};
+  }
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary.borderHover};
+  }
+
+  &[data-readonly='true'] {
+    border-color: ${({ theme }) => theme.colors.neutral.border};
+    background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+    cursor: not-allowed;
+  }
+
+  &[data-disabled='true'] {
+    border-color: ${({ theme }) => theme.colors.neutral.borderDisabled};
+    background: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+    cursor: not-allowed;
+  }
+`;
+const NumberInputV2 = forwardRef(
+  ({
+    disabled = false,
+    max = Number.MAX_SAFE_INTEGER,
+    min = 0,
+    name,
+    onChange,
+    onFocus,
+    onBlur,
+    size = "large",
+    step,
+    unit,
+    value,
+    tooltip,
+    className,
+    label,
+    labelDescription,
+    id,
+    placeholder = "",
+    error,
+    success,
+    helper,
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId,
+    required,
+    autoFocus,
+    readOnly
+  }, ref) => {
+    const localRef = useRef(null);
+    useImperativeHandle(ref, () => localRef.current);
+    const uniqueId = useId();
+    const localId = id ?? uniqueId;
+    const onClickSideButton = useCallback(
+      (direction) => () => {
+        if (direction === "up") {
+          localRef.current?.stepUp();
+        } else if (direction === "down") {
+          localRef.current?.stepDown();
+        }
+        onChange?.(parseInt(localRef.current?.value ?? "", 10) ?? min);
+      },
+      [localRef, min, onChange]
+    );
+    const isMinusDisabled = useMemo(
+      () => {
+        if (!localRef?.current?.value || localRef?.current?.value === "") {
+          return false;
+        }
+        const numericValue = Number(localRef?.current?.value);
+        if (Number.isNaN(numericValue))
+          return false;
+        const minValue = typeof min === "number" ? min : Number(min);
+        return Number.isNaN(numericValue) || numericValue <= minValue;
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [localRef?.current?.value, min]
+    );
+    const isPlusDisabled = useMemo(
+      () => {
+        if (!localRef?.current?.value || localRef?.current?.value === "") {
+          return false;
+        }
+        const numericValue = Number(localRef?.current?.value);
+        if (Number.isNaN(numericValue))
+          return false;
+        const maxValue = typeof max === "number" ? max : Number(max);
+        return numericValue >= maxValue;
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [localRef?.current?.value, max]
+    );
+    const helperSentiment = useMemo(() => {
+      if (error) {
+        return "danger";
+      }
+      if (success) {
+        return "success";
+      }
+      return "neutral";
+    }, [error, success]);
+    let inputValue;
+    if (value !== void 0) {
+      inputValue = value !== null && Number.isInteger(value) ? value.toString() : "";
+    }
+    return /* @__PURE__ */ jsxs(Stack, { gap: "0.5", className, children: [
+      label || labelDescription ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "1", alignItems: "center", children: [
+        label ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "0.5", alignItems: "start", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "label",
+              variant: "bodyStrong",
+              sentiment: "neutral",
+              htmlFor: id ?? localId,
+              children: label
+            }
+          ),
+          required ? /* @__PURE__ */ jsx(Icon, { name: "asterisk", color: "danger", size: 8 }) : null
+        ] }) : null,
+        labelDescription ?? null
+      ] }) : null,
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
+        Container,
+        {
+          "data-disabled": disabled,
+          "data-readonly": readOnly,
+          "data-error": !!error,
+          "data-success": !!success,
+          "data-unit": !!unit,
+          children: [
+            /* @__PURE__ */ jsx(
+              SideContainer,
+              {
+                justifyContent: "center",
+                alignItems: "center",
+                "data-size": size,
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    sentiment: "neutral",
+                    variant: "ghost",
+                    icon: "minus",
+                    size: size === "small" ? "xsmall" : "small",
+                    disabled: disabled || readOnly || isMinusDisabled,
+                    onClick: onClickSideButton("down"),
+                    "aria-label": "minus"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              InputContainer,
+              {
+                justifyContent: "space-between",
+                alignItems: "center",
+                templateColumns: "1fr auto",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      ref: localRef,
+                      type: "number",
+                      name,
+                      id: localId,
+                      placeholder,
+                      onChange: onChange ? (event) => {
+                        const newNumber = parseInt(event.target.value, 10);
+                        onChange(Number.isNaN(newNumber) ? null : newNumber);
+                      } : void 0,
+                      value: inputValue,
+                      onFocus,
+                      onBlur,
+                      "data-size": size,
+                      step,
+                      disabled,
+                      "aria-label": ariaLabel,
+                      "data-testid": dataTestId,
+                      min,
+                      max,
+                      required,
+                      autoFocus,
+                      readOnly,
+                      "data-has-unit": !!unit
+                    }
+                  ),
+                  unit ? /* @__PURE__ */ jsx(
+                    Unit,
+                    {
+                      variant: "body",
+                      sentiment: "neutral",
+                      as: "span",
+                      disabled,
+                      size,
+                      children: unit
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SideContainer,
+              {
+                justifyContent: "center",
+                alignItems: "center",
+                "data-size": size,
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    sentiment: "neutral",
+                    variant: "ghost",
+                    icon: "plus",
+                    size: size === "small" ? "xsmall" : "small",
+                    disabled: disabled || readOnly || isPlusDisabled,
+                    onClick: onClickSideButton("up"),
+                    "aria-label": "plus"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ) }) }),
+      error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          variant: "caption",
+          as: "span",
+          prominence: !error && !success ? "weak" : void 0,
+          sentiment: helperSentiment,
+          disabled: disabled || readOnly,
+          children: error || success || helper
+        }
+      ) : null,
+      !error && !success && typeof helper !== "string" && helper ? helper : null
+    ] });
+  }
+);
+export {
+  NumberInputV2
+};

package/dist/components/Pagination/getPageNumbers.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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
+ */
+export declare const getPageNumbers: (currentPage: number, pageCount: number, range?: number) => number[];

package/dist/{src/components → components}/Pagination/getPageNumbers.js

@@ -1,10 +1,3 @@
-/**
- * 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 = (currentPage, pageCount, range = 5) => {
   const gap = Math.floor(range / 2);
   let end = currentPage + gap;
@@ -21,9 +14,8 @@ const getPageNumbers = (currentPage, pageCount, range = 5) => {
   if (end < pageCount) {
     end = Math.min(end + remaining, pageCount);
   }
-  return Array.from({
-    length: end - start + 1
-  }, (_, index) => start + index);
+  return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+};
+export {
+  getPageNumbers
 };
-
-export { getPageNumbers };

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,30 @@
+type PaginationProps = {
+    /**
+      Event function called when changing the page
+    */
+    onChange: (newPage: number) => void;
+    /**
+      The current page (must be between 1 and pageCount included, otherwhile onChange will be called with a correct value)
+    */
+    page: number;
+    /**
+      Number of page you have
+    */
+    pageCount: number;
+    /**
+      How many page button you want to have
+    */
+    pageTabCount?: number;
+    /**
+      Disable all buttons
+    */
+    disabled?: boolean;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * Pagination is a component to navigate between pages, it is composed of 2 buttons to go to the previous and next page,
+ * and a list of buttons to go to a specific page.
+ */
+export declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, "data-testid": dataTestId, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Pagination/index.js

@@ -0,0 +1,124 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useCallback, useMemo, useEffect } from "react";
+import { Button } from "../Button/index.js";
+import { getPageNumbers } from "./getPageNumbers.js";
+const PageNumbersContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.space["2"]};
+  margin: 0 ${({ theme }) => theme.space["2"]};
+`;
+const PageSwitchContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.space["1"]};
+`;
+const StyledContainer = styled.div`
+  display: flex;
+`;
+const Pagination = ({
+  disabled = false,
+  page,
+  pageCount,
+  onChange,
+  pageTabCount = 5,
+  className,
+  "data-testid": dataTestId
+}) => {
+  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]
+  );
+  useEffect(() => {
+    if (page < 1) {
+      onChange(1);
+    }
+    if (page > pageCount) {
+      onChange(pageCount);
+    }
+  }, [page, pageCount, onChange]);
+  return /* @__PURE__ */ jsxs(StyledContainer, { className, "data-testid": dataTestId, children: [
+    /* @__PURE__ */ jsxs(PageSwitchContainer, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": "First",
+          disabled: page <= 1 || disabled,
+          variant: "outlined",
+          sentiment: "primary",
+          onClick: goToFirstPage,
+          icon: "arrow-left-double"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": "Back",
+          disabled: page <= 1 || disabled,
+          variant: "outlined",
+          sentiment: "primary",
+          onClick: goToPreviousPage,
+          icon: "arrow-left"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(PageNumbersContainer, { children: pageNumbersToDisplay.map((pageNumber) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": `Page ${pageNumber}`,
+        "aria-current": pageNumber === page,
+        disabled,
+        variant: "outlined",
+        sentiment: pageNumber === page ? "primary" : "neutral",
+        onClick: handlePageClick(pageNumber),
+        type: "button",
+        children: pageNumber
+      },
+      `pagination-page-${pageNumber}`
+    )) }),
+    /* @__PURE__ */ jsxs(PageSwitchContainer, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": "Next",
+          disabled: page >= pageCount || disabled,
+          variant: "outlined",
+          sentiment: "primary",
+          onClick: goToNextPage,
+          icon: "arrow-right"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": "Last",
+          disabled: page >= pageCount || disabled,
+          variant: "outlined",
+          sentiment: "primary",
+          onClick: goToLastPage,
+          icon: "arrow-right-double"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Pagination
+};

package/dist/components/PasswordCheck/index.d.ts

@@ -0,0 +1,20 @@
+type Rule = {
+    name: string;
+    text: string;
+    valid: boolean;
+};
+type PasswordCheckProps = {
+    /**
+     * Is an array of object that contains password rules. `name` is the name of the rule, `text` the text associated
+     * with the rule and `valid` is a boolean that determine if the rule is respected or not.
+     */
+    rules: Rule[];
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * PasswordCheck is a component that display a list of password rules with a check or a cross depending on the validity
+ * of the rule.
+ */
+export declare const PasswordCheck: ({ rules, className, "data-testid": dataTestId, }: PasswordCheckProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PasswordCheck/index.js

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

package/dist/components/PasswordStrengthMeter/index.d.ts

@@ -0,0 +1,39 @@
+type Strength = {
+    /**
+     * Color to display
+     */
+    color: string;
+    /**
+     * Text to display
+     */
+    t: string;
+};
+type Score = 0 | 1 | 2 | 3 | 4;
+type ResponseEstimate = {
+    score: Score;
+};
+type PasswordStrengthMeterProps = {
+    /**
+     * A function that should return a score based on password (index of strength array). The higher score is the stronger password is.
+     */
+    estimate?: ((passwordToTest: string, userInputs: string[]) => Promise<ResponseEstimate>) | ((passwordToTest: string, userInputs: string[]) => ResponseEstimate);
+    onChange?: (score: number) => unknown;
+    password?: string;
+    /**
+     * Strength is used for defining different color and text associated with it.
+     */
+    strength: Strength[];
+    title: string;
+    /**
+     * An array of string that defines what word shouldn't be used in the password.
+     */
+    forbiddenInputs?: string[];
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * PasswordStrengthMeter is a component that displays a password strength meter.
+ * @deprecated use Meter component instead
+ */
+export declare const PasswordStrengthMeter: ({ password, onChange, strength, title, estimate, forbiddenInputs, className, "data-testid": dataTestId, }: PasswordStrengthMeterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};