@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/Dialog/subComponents/Button.js

@@ -0,0 +1,24 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Button } from "../../Button/index.js";
+import { useDialogContext } from "../Context.js";
+const DialogButton = ({
+  children,
+  onClick,
+  disabled,
+  tooltip
+}) => {
+  const context = useDialogContext();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      sentiment: context.sentiment,
+      onClick,
+      disabled,
+      tooltip,
+      children
+    }
+  );
+};
+export {
+  DialogButton
+};

package/dist/components/Dialog/subComponents/Buttons.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type DialogButtonsProps = {
+    secondaryButton: ReactNode;
+    primaryButton: ReactNode;
+};
+export declare const DialogButtons: ({ secondaryButton, primaryButton, }: DialogButtonsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Dialog/subComponents/Buttons.js

@@ -0,0 +1,12 @@
+import { jsxs } from "@emotion/react/jsx-runtime";
+import { Stack } from "../../Stack/index.js";
+const DialogButtons = ({
+  secondaryButton,
+  primaryButton
+}) => /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, justifyContent: "end", children: [
+  secondaryButton,
+  primaryButton
+] });
+export {
+  DialogButtons
+};

package/dist/components/Dialog/subComponents/CancelButton.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Button } from '../../Button';
+type DialogCancelButtonProps = {
+    children: ReactNode;
+    onClick: ComponentProps<typeof Button>['onClick'];
+};
+export declare const DialogCancelButton: ({ children, onClick, }: DialogCancelButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Dialog/subComponents/CancelButton.js

@@ -0,0 +1,9 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Button } from "../../Button/index.js";
+const DialogCancelButton = ({
+  children,
+  onClick
+}) => /* @__PURE__ */ jsx(Button, { variant: "outlined", sentiment: "neutral", onClick, children });
+export {
+  DialogCancelButton
+};

package/dist/components/Dialog/subComponents/Stack.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+type DialogStackProps = {
+    children: ReactNode;
+};
+export declare const DialogStack: ({ children }: DialogStackProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Dialog/subComponents/Stack.js

@@ -0,0 +1,6 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Stack } from "../../Stack/index.js";
+const DialogStack = ({ children }) => /* @__PURE__ */ jsx(Stack, { gap: 3, children });
+export {
+  DialogStack
+};

package/dist/components/Dialog/subComponents/Text.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type DialogTextProps = {
+    children: React.ReactNode;
+};
+export declare const DialogText: ({ children }: DialogTextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Dialog/subComponents/Text.js

@@ -0,0 +1,6 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Text } from "../../Text/index.js";
+const DialogText = ({ children }) => /* @__PURE__ */ jsx(Text, { as: "p", variant: "body", children });
+export {
+  DialogText
+};

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+declare const CONTAINER_SIZES: {
+    readonly small: 720;
+    readonly medium: 720;
+    readonly large: 1140;
+};
+type SizesTypes = keyof typeof CONTAINER_SIZES;
+type EmptyStateProps = {
+    title?: string;
+    description: ReactNode;
+    /**
+     * Container size will be same on `small` and `medium`
+     * only the image size will change on those properties.
+     * `small` and `medium` container is 720px wide
+     * `large` container is 1080px wide
+     */
+    size?: SizesTypes;
+    /**
+     * You can give the path of an image or a component that will render an image.
+     */
+    image?: ReactNode;
+    primaryButton?: ReactNode;
+    secondaryButton?: ReactNode;
+    learnMore?: {
+        link: string;
+        text: string;
+        target?: string;
+    };
+    bordered?: boolean;
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+};
+/**
+ * EmptyState component is used to display a message when there is no data to show.
+ */
+export declare const EmptyState: ({ image, title, size, description, primaryButton, secondaryButton, learnMore, className, bordered, children, "data-testid": dataTestId, }: EmptyStateProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EmptyState/index.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Link } from "../Link/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const CONTAINER_SIZES = {
+  small: 720,
+  medium: 720,
+  large: 1140
+};
+const IMAGE_SIZES = {
+  small: 64,
+  medium: 96,
+  large: 240
+};
+const CenteredText = styled(Text)`
+  text-align: center;
+`;
+const Container = styled(Stack, {
+  shouldForwardProp: (prop) => !["size", "bordered"].includes(prop)
+})`
+  max-width: ${({ size }) => CONTAINER_SIZES[size]}px;
+  margin: 0 auto;
+  ${({ size }) => size === "large" ? "padding: 0 140px" : null};
+  ${({ theme, bordered }) => bordered ? `
+    border: 1px solid ${theme.colors.neutral.border};
+    border-radius: ${theme.radii.default};
+    ` : null};
+`;
+const StyledStack = styled(Stack)`
+  padding: ${({ theme }) => theme.space["5"]};
+`;
+const EmptyState = ({
+  image,
+  title,
+  size = "large",
+  description,
+  primaryButton,
+  secondaryButton,
+  learnMore,
+  className,
+  bordered,
+  children,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsx(
+  Container,
+  {
+    size,
+    bordered,
+    className,
+    "data-testid": dataTestId,
+    children: /* @__PURE__ */ jsxs(StyledStack, { gap: 3, justifyContent: "center", alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Stack, { gap: 2, justifyContent: "center", alignItems: "center", children: [
+        image && typeof image === "string" ? /* @__PURE__ */ jsx("img", { width: IMAGE_SIZES[size], alt: "", src: image }) : image,
+        /* @__PURE__ */ jsxs(Stack, { gap: 0.5, alignItems: "center", children: [
+          title ? /* @__PURE__ */ jsx(CenteredText, { as: "h2", variant: "headingSmall", prominence: "strong", children: title }) : null,
+          /* @__PURE__ */ jsx(CenteredText, { as: "p", variant: "body", children: description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { gap: 2, justifyContent: "center", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, children: [
+          secondaryButton,
+          primaryButton
+        ] }),
+        learnMore?.text ? /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: learnMore.link,
+            target: learnMore.target,
+            sentiment: "info",
+            iconPosition: "right",
+            children: learnMore.text
+          }
+        ) : null
+      ] }),
+      children
+    ] })
+  }
+);
+export {
+  EmptyState
+};

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+type ExpandableProps = {
+    /**
+     * The content to display
+     */
+    children: ReactNode;
+    /**
+     * To display or not the content
+     */
+    opened?: boolean;
+    /**
+     * The minimum height of the content
+     */
+    minHeight?: number;
+    className?: string;
+    'data-testid'?: string;
+    animationDuration?: number;
+};
+export declare const StyledExpandable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    opened?: boolean | undefined;
+    minHeight: number;
+    animationDuration: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * The Expandable component is a dynamic React component that allows for the expansion of its children content
+ * based on its height. The component comes with a sleek and smooth animation, providing a visually pleasing
+ * user experience.
+ */
+export declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, animationDuration, }: ExpandableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Expandable/index.js

@@ -0,0 +1,79 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useState, useRef, useEffect } from "react";
+const ANIMATION_DURATION = 300;
+const StyledExpandable = styled("div", {
+  shouldForwardProp: (prop) => !["opened", "minHeight", "animationDuration"].includes(prop)
+})`
+  transition:
+    max-height ${({ animationDuration }) => animationDuration}ms ease-out,
+    opacity ${({ animationDuration }) => animationDuration}ms ease-out;
+  overflow: ${({ opened }) => opened ? "visible" : "hidden"};
+  height: auto;
+  max-height: ${({ opened, minHeight }) => opened ? "initial" : `${minHeight}px`};
+`;
+const Expandable = ({
+  children,
+  opened,
+  minHeight = 0,
+  className,
+  "data-testid": dataTestId,
+  animationDuration = ANIMATION_DURATION
+}) => {
+  const [height, setHeight] = useState(null);
+  const transitionTimer = useRef();
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      setHeight(ref.current.scrollHeight ?? 0);
+    }
+  }, [ref.current?.scrollHeight]);
+  useEffect(() => {
+    if (opened && ref.current && height) {
+      ref.current.style.maxHeight = `${height}px`;
+      ref.current.style.visibility = "";
+      transitionTimer.current = setTimeout(() => {
+        if (ref.current) {
+          ref.current.style.maxHeight = "initial";
+          ref.current.style.overflow = "visible";
+          ref.current.style.visibility = "";
+        }
+      }, ANIMATION_DURATION);
+    } else {
+      clearTimeout(transitionTimer.current);
+      if (ref.current && height) {
+        ref.current.style.maxHeight = `${height}px`;
+        transitionTimer.current = setTimeout(() => {
+          if (ref.current) {
+            ref.current.style.maxHeight = `${minHeight}px`;
+            ref.current.style.overflow = "hidden";
+            setTimeout(() => {
+              if (ref.current && !minHeight) {
+                ref.current.style.visibility = "hidden";
+              }
+            }, ANIMATION_DURATION);
+          }
+        }, 0);
+      }
+    }
+    return () => {
+      clearTimeout(transitionTimer.current);
+    };
+  }, [height, minHeight, opened]);
+  return /* @__PURE__ */ jsx(
+    StyledExpandable,
+    {
+      "data-testid": dataTestId,
+      ref,
+      className,
+      opened,
+      minHeight,
+      animationDuration,
+      children
+    }
+  );
+};
+export {
+  Expandable,
+  StyledExpandable
+};

package/dist/components/GlobalAlert/GlobalAlertLink.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from 'react';
+import { Link } from '../Link';
+export declare const GlobalAlertLink: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, }: Omit<ComponentProps<typeof Link>, 'sentiment' | 'prominence' | 'size'>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/GlobalAlert/GlobalAlertLink.js

@@ -0,0 +1,39 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import { Link } from "../Link/index.js";
+const GlobalAlertLink = ({
+  children,
+  href,
+  target,
+  download,
+  rel,
+  className,
+  onClick,
+  "aria-label": ariaLabel,
+  oneLine = false,
+  "data-testid": dataTestId
+}) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href,
+      target,
+      download,
+      sentiment: "neutral",
+      prominence: theme === "light" ? "stronger" : "strong",
+      size: "small",
+      variant: "inline",
+      rel,
+      className,
+      onClick,
+      "aria-label": ariaLabel,
+      oneLine,
+      "data-testid": dataTestId,
+      children
+    }
+  );
+};
+export {
+  GlobalAlertLink
+};

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

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+type GlobalAlertProps = {
+    children: ReactNode;
+    variant?: 'info' | 'danger' | 'promotional';
+    onClose?: () => void;
+    closable?: boolean;
+    className?: string;
+    'data-testid'?: string;
+    buttonText?: string;
+    onClickButton?: () => void;
+};
+/**
+ * GlobalAlert is a component that is used to display a global alert message.
+ * It has its own internal state and can be closed by clicking on the close button.
+ */
+export declare const GlobalAlert: {
+    ({ children, variant, onClose, closable, buttonText, onClickButton, className, "data-testid": dataTestId, }: GlobalAlertProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+    Link: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, }: Omit<{
+        children: ReactNode;
+        target?: import("react").HTMLAttributeAnchorTarget | undefined;
+        download?: string | boolean | undefined;
+        sentiment?: import("../../theme").Color | undefined;
+        prominence?: "strong" | "default" | "stronger" | "weak" | undefined;
+        size?: ("large" | "small") | undefined;
+        iconPosition?: ("left" | "right") | undefined;
+        rel?: string | undefined;
+        className?: string | undefined;
+        href: string;
+        onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
+        'aria-label'?: string | undefined;
+        /**
+         * GlobalAlert is a component that is used to display a global alert message.
+         * It has its own internal state and can be closed by clicking on the close button.
+         */
+        oneLine?: boolean | undefined;
+        'data-testid'?: string | undefined;
+        variant?: "inline" | "standalone" | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement>, "size" | "sentiment" | "prominence">) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/GlobalAlert/index.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useReducer } from "react";
+import { Button, SIZE_HEIGHT } from "../Button/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { GlobalAlertLink } from "./GlobalAlertLink.js";
+const CloseButton = styled(Button)`
+  background: none;
+  position: absolute;
+  right: ${SIZE_HEIGHT.xsmall}px;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: none;
+  }
+`;
+const Container = styled(Stack)`
+  width: 100%;
+  height: 56px;
+  padding: 0 ${({ theme }) => theme.space["2"]};
+
+  &[data-variant='info'] {
+    background-color: ${({ theme }) => theme.colors.info.backgroundStrong};
+  }
+
+  &[data-variant='danger'] {
+    background-color: ${({ theme }) => theme.colors.danger.backgroundStrong};
+  }
+
+  &[data-variant='promotional'] {
+    background: ${({ theme }) => theme.colors.other.gradients.background.linear.aqua};
+  }
+`;
+const GlobalAlert = ({
+  children,
+  variant = "info",
+  onClose,
+  closable = true,
+  buttonText,
+  onClickButton,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const { theme } = useTheme();
+  const [opened, toggleOpened] = useReducer((value) => !value, true);
+  if (!opened)
+    return null;
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      justifyContent: "center",
+      alignItems: "center",
+      direction: "row",
+      "data-variant": variant,
+      "data-testid": dataTestId,
+      className,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            gap: 2,
+            direction: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  variant: "bodySmall",
+                  as: "p",
+                  sentiment: "neutral",
+                  prominence: theme === "light" ? "stronger" : "strong",
+                  children
+                }
+              ),
+              onClickButton && buttonText ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: onClickButton,
+                  variant: "filled",
+                  sentiment: "neutral",
+                  size: "small",
+                  children: buttonText
+                }
+              ) : null
+            ]
+          }
+        ),
+        closable ? /* @__PURE__ */ jsx(
+          CloseButton,
+          {
+            variant: "filled",
+            size: "xsmall",
+            icon: "close",
+            sentiment: "primary",
+            onClick: () => {
+              toggleOpened();
+              onClose?.();
+            }
+          }
+        ) : null
+      ]
+    }
+  );
+};
+GlobalAlert.Link = GlobalAlertLink;
+export {
+  GlobalAlert
+};

package/dist/components/LineChart/CustomLegend.d.ts

@@ -0,0 +1,13 @@
+import type { DatumValue } from '@nivo/core';
+import type { Serie } from '@nivo/line';
+type Transformer = (value: DatumValue) => string;
+type CustomLegendProps = {
+    axisTransformer?: Transformer;
+    data?: Serie[];
+    selected: string[];
+    setSelected: (selected: string[]) => void;
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const CustomLegend: ({ axisTransformer, data, selected, setSelected, className, "data-testid": dataTestId, }: CustomLegendProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LineChart/CustomLegend.js

@@ -0,0 +1,109 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+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";
+const styles = {
+  body: (theme) => css`
+    > :not(:last-child) {
+      border-bottom: 1px solid ${theme.colors.neutral.backgroundStrong};
+    }
+  `,
+  head: (theme) => css`
+    display: flex;
+    padding-bottom: 8px;
+    border-bottom: 1px solid ${theme.colors.neutral.backgroundStrong};
+
+    > :not(:last-child) {
+      margin-right: 8px;
+    }
+  `,
+  legend: (index) => (theme) => css`
+    margin-left: 16px;
+    width: 32px;
+    height: 2px;
+    background-color: ${getLegendColor(theme)[index]};
+  `,
+  row: css`
+    display: flex;
+    padding: 4px 0;
+    > :not(:last-child) {
+      margin-right: 8px;
+    }
+  `
+};
+const StyledText = styled(Text)`
+  text-align: right;
+  flex: 1;
+  min-width: 72px;
+  align-self: center;
+`;
+const Cell = ({ value, variant }) => /* @__PURE__ */ jsx(StyledText, { variant, color: "neutral", as: "span", children: value });
+const CellValueContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const LongContainer = styled.div`
+  display: flex;
+  flex: 6;
+`;
+const noop = (value) => value.toString();
+const StyledContainer = styled.div`
+  margin-top: ${({ theme }) => theme.space[2]};
+`;
+const CustomLegend = ({
+  axisTransformer = noop,
+  data,
+  selected,
+  setSelected,
+  className,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsxs(StyledContainer, { className, "data-testid": dataTestId, children: [
+  /* @__PURE__ */ jsxs("div", { css: styles.head, children: [
+    /* @__PURE__ */ jsx(LongContainer, { children: "Legend" }),
+    /* @__PURE__ */ jsx(Cell, { variant: "body", value: "Minimum" }),
+    /* @__PURE__ */ jsx(Cell, { variant: "body", value: "Maximum" }),
+    /* @__PURE__ */ jsx(Cell, { variant: "body", value: "Average" }),
+    /* @__PURE__ */ jsx(Cell, { variant: "body", value: "Current" })
+  ] }),
+  /* @__PURE__ */ 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 /* @__PURE__ */ jsxs("div", { css: styles.row, children: [
+      /* @__PURE__ */ jsx(LongContainer, { children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: selected.includes(labelIndexed),
+          name: id,
+          onChange: () => setSelected([...getSelected(id, index, selected)]),
+          children: /* @__PURE__ */ jsxs(CellValueContainer, { children: [
+            /* @__PURE__ */ jsx(Text, { as: "span", variant: "bodySmall", sentiment: "neutral", children: row?.["label"] }),
+            /* @__PURE__ */ jsx("div", { "data-testid": `label-${id}`, css: styles.legend(index) })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Cell, { variant: "bodySmall", value: axisTransformer(getMin(values)) }),
+      /* @__PURE__ */ jsx(Cell, { variant: "bodySmall", value: axisTransformer(getMax(values)) }),
+      /* @__PURE__ */ jsx(
+        Cell,
+        {
+          variant: "bodySmall",
+          value: axisTransformer(getAverage(values))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Cell,
+        {
+          variant: "bodySmall",
+          value: axisTransformer(getCurrent(values))
+        }
+      )
+    ] }, labelIndexed);
+  }) })
+] });
+export {
+  CustomLegend
+};

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

@@ -0,0 +1,6 @@
+import type { Point } from '@nivo/line';
+type LineChartTooltipProps = {
+    point: Point;
+};
+export declare const LineChartTooltip: ({ point }: LineChartTooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};