@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/PasswordStrengthMeter/index.js

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useState, useCallback, useEffect } from "react";
+import { Text } from "../Text/index.js";
+const StyledTitle = styled(Text)`
+  display: inline-block;
+  vertical-align: top;
+  line-height: 22px;
+`;
+const StyledStrength = styled(Text)`
+  float: right;
+  vertical-align: top;
+  color: ${({ strength }) => strength.color};
+`;
+const StyledWrapper = styled.div`
+  background-color: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+  border-radius: ${({ theme }) => theme.radii.default};
+  height: 8px;
+  margin-top: ${({ theme }) => theme.space["1"]};
+  margin-bottom: ${({ theme }) => theme.space["2"]};
+`;
+const StyledMeter = styled.div`
+  border-radius: ${({ theme }) => theme.radii.default};
+  height: 100%;
+  transition: all 0.5s;
+`;
+const DEFAULT_ESTIMATE = () => ({ score: 0 });
+const DEFAULT_FORBIDDEN_WORDS = [];
+const PasswordStrengthMeter = ({
+  password = "",
+  onChange,
+  strength,
+  title,
+  estimate = DEFAULT_ESTIMATE,
+  forbiddenInputs = DEFAULT_FORBIDDEN_WORDS,
+  className,
+  "data-testid": dataTestId
+}) => {
+  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 /* @__PURE__ */ jsxs(
+    "div",
+    {
+      title,
+      role: "alert",
+      "aria-live": "polite",
+      className,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx(StyledTitle, { variant: "bodySmallStrong", as: "p", children: title }),
+        /* @__PURE__ */ jsx(
+          StyledStrength,
+          {
+            as: "span",
+            variant: "bodySmallStrong",
+            strength: strength[score],
+            children: strength[score]?.t
+          }
+        ),
+        /* @__PURE__ */ jsx(StyledWrapper, { children: /* @__PURE__ */ jsx(
+          StyledMeter,
+          {
+            style: {
+              backgroundColor,
+              width
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  PasswordStrengthMeter
+};

package/dist/components/PieChart/Legends.d.ts

@@ -0,0 +1,9 @@
+import type { Data } from './types';
+type LegendsProps = {
+    data?: Data[];
+    focused?: string;
+    onFocusChange(index?: string): void;
+    colors: string[];
+};
+declare const Legends: ({ focused, data, onFocusChange, colors }: LegendsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Legends;

package/dist/components/PieChart/Legends.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { keyframes, css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Tooltip } from "../Tooltip/index.js";
+import Tooltip$1 from "./Tooltip.js";
+const bulletFlashAnim = keyframes`
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+const animationFlash = (isFocused) => isFocused ? css`
+        ${bulletFlashAnim.styles}
+        animation: ${bulletFlashAnim.name} linear 1500ms infinite;
+      ` : "";
+const List = styled.ul`
+  font-size: 14px;
+  list-style-type: none;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  max-height: 100%;
+  overflow-y: auto;
+`;
+const ListItem = styled.li`
+  display: flex;
+  align-items: center;
+  margin-top: ${({ theme }) => theme.space["1"]};
+  width: 100%;
+  color: ${({ isFocused, theme }) => isFocused ? theme.colors.primary.text : theme.colors.neutral.text};
+`;
+const Bullet = styled.div`
+  display: inline-block;
+  border-radius: ${({ theme }) => theme.radii.circle};
+  width: 10px;
+  height: 10px;
+  margin: 0 ${({ theme }) => theme.space["1"]};
+  background: ${({ color }) => color};
+  ${({ isFocused }) => animationFlash(isFocused)}
+`;
+const Label = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: baseline;
+`;
+const Value = styled.div`
+  margin-left: 6px;
+  font-weight: ${({ isFocused }) => isFocused ? 500 : 400};
+`;
+const Text = styled.span`
+  flex: none;
+  margin-right: 6px;
+  font-weight: ${({ isFocused }) => isFocused ? 500 : 400};
+`;
+const ToggleBox = styled.div`
+  width: 250px;
+  height: 21px;
+  position: absolute;
+`;
+const Line = styled.span`
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  position: relative;
+  width: 100%;
+`;
+const ProgressiveLine = styled.span`
+  border-bottom: 1px solid ${({ theme }) => theme.colors.primary.border};
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: -1px;
+  transition: width 500ms ease;
+  width: ${({ isFocused }) => isFocused ? 100 : 0}%;
+`;
+const Legends = ({ focused, data, onFocusChange, colors }) => /* @__PURE__ */ jsx(List, { children: data?.map((item, index) => {
+  const isSegmentFocused = focused !== void 0 && item.id === focused;
+  const id = `chart-legend-${item.id}`;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      visible: isSegmentFocused,
+      id,
+      text: /* @__PURE__ */ jsx(Tooltip$1, { data: item }),
+      children: /* @__PURE__ */ jsxs(ListItem, { isFocused: isSegmentFocused, children: [
+        /* @__PURE__ */ jsx(
+          ToggleBox,
+          {
+            "data-testid": id,
+            onMouseOver: () => onFocusChange(item.id),
+            onFocus: () => onFocusChange(item.id),
+            onMouseOut: () => onFocusChange(),
+            onBlur: () => onFocusChange()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Bullet,
+          {
+            color: colors[index],
+            isFocused: isSegmentFocused,
+            needPattern: item.needPattern,
+            id: `chart-legend-${item.id}`
+          }
+        ),
+        /* @__PURE__ */ jsxs(Label, { children: [
+          /* @__PURE__ */ jsx(Text, { isFocused: isSegmentFocused, children: item.name }),
+          /* @__PURE__ */ jsx(Line, { children: /* @__PURE__ */ jsx(ProgressiveLine, { isFocused: isSegmentFocused }) })
+        ] }),
+        /* @__PURE__ */ jsx(Value, { isFocused: isSegmentFocused, children: item.value })
+      ] })
+    },
+    item.id
+  );
+}) });
+export {
+  Legends as default
+};

package/dist/components/PieChart/Tooltip.d.ts

@@ -0,0 +1,12 @@
+type TooltipProps = {
+    data: {
+        name?: string | null;
+        value?: string | null;
+        details?: {
+            name?: string | null;
+            value?: string | null;
+        }[] | null;
+    };
+};
+declare const Tooltip: ({ data }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Tooltip;

package/dist/components/PieChart/Tooltip.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Text } from "../Text/index.js";
+const StyledList = styled.ul`
+  padding: 0 8px 8px 8px;
+  margin: 0;
+  width: 100%;
+`;
+const StyledItem = styled.li`
+  display: flex;
+  margin-top: 6px;
+  width: 100%;
+  justify-content: space-between;
+  text-align: left;
+  gap: 8px;
+`;
+const Tooltip = ({ data }) => /* @__PURE__ */ jsx("div", { tabIndex: -1, role: "tooltip", children: /* @__PURE__ */ jsxs(StyledList, { children: [
+  /* @__PURE__ */ jsxs(StyledItem, { children: [
+    /* @__PURE__ */ jsx(Text, { as: "p", variant: "body", prominence: "stronger", children: data.name }),
+    /* @__PURE__ */ jsx(Text, { as: "p", variant: "body", prominence: "stronger", children: data.value })
+  ] }),
+  data.details?.map((detail) => /* @__PURE__ */ jsxs(StyledItem, { children: [
+    /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", prominence: "stronger", children: detail.name }),
+    /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", prominence: "stronger", children: detail.value })
+  ] }, detail.name))
+] }) });
+export {
+  Tooltip as default
+};

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

@@ -0,0 +1,20 @@
+import type { Box } from '@nivo/core';
+import type { ReactNode } from 'react';
+import type { Data } from './types';
+type PieChartProps = {
+    chartProps?: Record<string, unknown>;
+    data?: Data[];
+    height?: number;
+    width?: number;
+    emptyLegend?: string;
+    content?: ReactNode;
+    withLegend?: boolean;
+    margin?: Box;
+};
+/**
+ * PieChart component is a wrapper around the Nivo Pie component to display a pie chart.
+ * See https://nivo.rocks/pie/ for more information.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+export declare const PieChart: ({ height, width, data, emptyLegend, content, withLegend, margin, chartProps, }: PieChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PieChart/index.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+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";
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  height: ${({ height }) => `${height}px`};
+`;
+const EmptyLegend = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+`;
+const StyledContent = styled.div`
+  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;
+`;
+const DEFAULT_CHARTPROPS = {};
+const DEFAULT_MARGIN = { bottom: 10, left: 10, right: 10, top: 10 };
+const PieChart = ({
+  height = 206,
+  width = 206,
+  data = void 0,
+  emptyLegend,
+  content,
+  withLegend = false,
+  margin = DEFAULT_MARGIN,
+  chartProps = DEFAULT_CHARTPROPS
+}) => {
+  const theme = useTheme();
+  const [currentFocusIndex, setCurrentFocusIndex] = useState();
+  const emptyTooltip = useCallback(() => /* @__PURE__ */ jsx("span", {}), []);
+  const isEmpty = !data || data.length === 0;
+  const EmptyLegendDisplayed = useCallback(
+    () => emptyLegend ? /* @__PURE__ */ jsx(EmptyLegend, { children: /* @__PURE__ */ jsx(Text, { variant: "body", as: "p", children: emptyLegend }) }) : null,
+    [emptyLegend]
+  );
+  const localColors = getLegendColor(theme);
+  const LegendDisplayer = useCallback(
+    () => isEmpty ? /* @__PURE__ */ jsx(EmptyLegendDisplayed, {}) : /* @__PURE__ */ jsx(
+      Legends,
+      {
+        focused: currentFocusIndex,
+        data,
+        onFocusChange: setCurrentFocusIndex,
+        colors: localColors
+      }
+    ),
+    [isEmpty, currentFocusIndex, data, EmptyLegendDisplayed, localColors]
+  );
+  return /* @__PURE__ */ jsxs(Container, { height, children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        Pie,
+        {
+          colors: localColors,
+          height,
+          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"
+            }
+          ],
+          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(void 0),
+          ...chartProps
+        }
+      ),
+      content ? /* @__PURE__ */ jsx(StyledContent, { children: content }) : null
+    ] }),
+    withLegend ? /* @__PURE__ */ jsx(LegendDisplayer, {}) : null
+  ] });
+};
+export {
+  PieChart
+};

package/dist/components/PieChart/types.d.ts

@@ -0,0 +1,7 @@
+export type Data = {
+    name?: string | null;
+    needPattern?: boolean | null;
+    percent: number;
+    id: string;
+    value?: string | null;
+};

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

@@ -0,0 +1,55 @@
+import type { ReactNode, Ref } from 'react';
+type SentimentType = 'neutral' | 'primary';
+/**
+ * Popover component is used to display additional information or actions on top of the main content of the page.
+ * It is usually triggered by clicking on a button. It includes a title, a close button and a content area.
+ */
+export declare const Popover: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    content: ReactNode;
+    title: string;
+    sentiment?: SentimentType | undefined;
+    visible?: boolean | undefined;
+    size?: "large" | "small" | "medium" | undefined;
+    onClose?: (() => void) | undefined;
+    className?: string | undefined;
+    'data-testid'?: string | undefined;
+    maxWidth?: string | undefined;
+    maxHeight?: string | undefined;
+    /**
+     * By default, the portal target is children container or document.body if children is a function. You can override this
+     * behavior by setting a portalTarget prop.
+     */
+    portalTarget?: HTMLElement | undefined;
+} & Pick<{
+    id?: string | undefined;
+    children: ReactNode | ((renderProps: {
+        className?: string | undefined;
+        onBlur: () => void;
+        onFocus: () => void;
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        ref: import("react").RefObject<HTMLDivElement>;
+    }) => ReactNode);
+    maxWidth?: string | number | undefined;
+    placement?: import("../Popup/helpers").PopupPlacement | undefined;
+    text?: ReactNode;
+    className?: string | undefined;
+    containerFullWidth?: boolean | undefined;
+    visible?: boolean | undefined;
+    innerRef?: Ref<HTMLDivElement | null> | undefined;
+    role?: string | undefined;
+    'data-testid'?: string | undefined;
+    hasArrow?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    tabIndex?: number | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler | undefined;
+    'aria-haspopup'?: boolean | "menu" | "dialog" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
+    hideOnClickOutside?: boolean | undefined;
+    debounceDelay?: number | undefined;
+    maxHeight?: string | number | undefined;
+    disableAnimation?: boolean | undefined;
+    portalTarget?: HTMLElement | undefined;
+    dynamicDomRendering?: boolean | undefined;
+} & import("react").RefAttributes<HTMLDivElement>, "placement" | "dynamicDomRendering"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Popover/index.js

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { forwardRef, useRef, useState, useEffect, useCallback } from "react";
+import { Button } from "../Button/index.js";
+import { Popup } from "../Popup/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const SIZES_WIDTH = {
+  small: 320,
+  medium: 420,
+  large: 520
+};
+const StyledPopup = styled(Popup, {
+  shouldForwardProp: (prop) => !["sentiment", "size"].includes(prop)
+})`
+  padding: ${({ theme }) => theme.space["2"]};
+  width: ${({ size }) => SIZES_WIDTH[size]}px;
+  max-width: ${({ size }) => SIZES_WIDTH[size]}px;
+  text-align: initial;
+
+  ${({ theme, sentiment }) => {
+  if (sentiment === "neutral") {
+    return `
+      background: ${theme.colors.neutral.background};
+      box-shadow: ${theme.shadows.popover};
+      &[data-has-arrow='true'] {
+        &::after {
+          border-color: ${theme.colors.neutral.background} transparent transparent transparent;
+        }
+      }
+      `;
+  }
+  return `
+      background: ${theme.colors.primary.backgroundStrong};
+      box-shadow: ${theme.shadows.popover};
+      &[data-has-arrow='true'] {
+        &::after {
+          border-color: ${theme.colors.primary.backgroundStrong} transparent transparent transparent;
+        }
+      }
+      `;
+}}
+`;
+const StyledStack = styled(Stack)`
+  color: ${({ theme }) => theme.colors.neutral.text};
+`;
+const ContentWrapper = ({
+  title,
+  onClose,
+  children,
+  sentiment
+}) => /* @__PURE__ */ jsxs(StyledStack, { gap: 1, children: [
+  /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "bodyStrong",
+        as: "h3",
+        sentiment: "neutral",
+        prominence: sentiment === "neutral" ? "strong" : "stronger",
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: sentiment === "neutral" ? "ghost" : "filled",
+        sentiment: sentiment === "neutral" ? "neutral" : "primary",
+        onClick: onClose,
+        size: "small",
+        icon: "close",
+        "aria-label": "close"
+      }
+    )
+  ] }),
+  typeof children === "string" ? /* @__PURE__ */ jsx(
+    Text,
+    {
+      variant: "bodySmall",
+      as: "p",
+      sentiment: "neutral",
+      prominence: sentiment === "neutral" ? "strong" : "stronger",
+      children
+    }
+  ) : children
+] });
+const Popover = forwardRef(
+  ({
+    visible = false,
+    children,
+    placement,
+    content,
+    title,
+    sentiment = "neutral",
+    size = "medium",
+    onClose,
+    className,
+    maxWidth,
+    maxHeight,
+    "data-testid": dataTestId,
+    portalTarget,
+    dynamicDomRendering
+  }, ref) => {
+    const innerRef = useRef(null);
+    const [localVisible, setLocalVisible] = useState(visible);
+    useEffect(() => {
+      setLocalVisible(visible);
+    }, [visible]);
+    const localOnClose = useCallback(() => {
+      setLocalVisible(false);
+      onClose?.();
+    }, [onClose]);
+    return /* @__PURE__ */ jsx(
+      StyledPopup,
+      {
+        hideOnClickOutside: true,
+        debounceDelay: 0,
+        visible: localVisible,
+        placement,
+        text: /* @__PURE__ */ jsx(
+          ContentWrapper,
+          {
+            title,
+            onClose: localOnClose,
+            sentiment,
+            children: content
+          }
+        ),
+        className,
+        sentiment,
+        "data-testid": dataTestId,
+        size,
+        role: "dialog",
+        ref,
+        tabIndex: -1,
+        innerRef,
+        onClose: localOnClose,
+        maxWidth,
+        maxHeight,
+        portalTarget,
+        dynamicDomRendering,
+        children
+      }
+    );
+  }
+);
+export {
+  Popover
+};

package/dist/components/Popup/animations.d.ts

@@ -0,0 +1,11 @@
+export type PositionsType = {
+    arrowLeft: number;
+    arrowTop: number;
+    arrowTransform: string;
+    placement: string;
+    rotate: number;
+    popupInitialPosition: string;
+    popupPosition: string;
+};
+export declare const animation: (positions: PositionsType) => import("@emotion/react").Keyframes;
+export declare const exitAnimation: (positions: PositionsType) => import("@emotion/react").Keyframes;

package/dist/{src/components → components}/Popup/animations.js

@@ -1,6 +1,5 @@
-import { keyframes } from '@emotion/react';
-
-const animation = positions => keyframes`
+import { keyframes } from "@emotion/react";
+const animation = (positions) => keyframes`
   0% {
     opacity: 0;
     transform: ${positions.popupInitialPosition};
@@ -10,7 +9,7 @@ const animation = positions => keyframes`
     transform: ${positions.popupPosition};
   }
 `;
-const exitAnimation = positions => keyframes`
+const exitAnimation = (positions) => keyframes`
   0% {
     opacity: 1;
     transform: ${positions.popupPosition};
@@ -20,5 +19,7 @@ const exitAnimation = positions => keyframes`
     transform: ${positions.popupInitialPosition};
   }
 `;
-
-export { animation, exitAnimation };
+export {
+  animation,
+  exitAnimation
+};