@ultraviolet/plus 0.14.4 → 0.15.1

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

@@ -0,0 +1,132 @@
+import type { Alert } from '@ultraviolet/ui';
+import type { ComponentProps, ReactNode } from 'react';
+import type EstimateCostLocales from './locales/en';
+export type EstimateCostProps = {
+    /**
+     * Text to display into an alert on the top of the EstimateCost component.
+     */
+    alert?: ReactNode;
+    alertTitle?: string;
+    /**
+     * Type of the alert defined by the Scaleway UI Alert component.
+     */
+    alertVariant?: ComponentProps<typeof Alert>['sentiment'];
+    children: ReactNode;
+    /**
+     * Individual fees to display at the bottom of the EstimateCost component.
+     */
+    commitmentFees?: number;
+    /**
+     * Content to display into the fees part, it can be any component but in order to have a consistent design, it is recommended to use `<EstimateCost.Regular>` and `<EstimateCost.Strong>` components.
+     */
+    commitmentFeesContent?: ReactNode;
+    /**
+     * By default, a description exists but if you need you can customize it with this prop.
+     */
+    description?: ReactNode;
+    /**
+     * Hide the floating estimate cost overlay shown in the bottom of the page.
+     */
+    hideOverlay?: boolean;
+    /**
+     * Disable left button on the overlay.
+     */
+    disableOverlayLeft?: boolean;
+    /**
+     * Disable right button (submit) on the overlay.
+     */
+    disableOverlayRight?: boolean;
+    /**
+     * This is a global discount for all estimate cost, all sub items will be impacted by this discount.
+     * The discount is a percentage, so 0.1 means 10% discount. Discount = 1 means 100% so it means free.
+     * This is usually associate with beta products and prop `isBeta`.
+     */
+    discount?: number;
+    /**
+     * The default time unit to select.
+     */
+    defaultTimeUnit?: Units;
+    /**
+     * List of time unit the price can be calculated with. Can only be an array of `seconds`, `minutes`, `hours`, `days` or `months`.
+     */
+    timeUnits?: Units[];
+    /**
+     * Hide the selectable time unit on the top of the component.
+     */
+    hideTimeUnit?: boolean;
+    /**
+     * Hide the total price at the bottom of the component.
+     */
+    hideTotal?: boolean;
+    /**
+     * Hide the hourly price in total section at the bottom of the component.
+     */
+    hideHourlyPriceOnTotal?: boolean;
+    /**
+     * Show a badge beta on the total price with how much discount is applied.
+     */
+    isBeta?: boolean;
+    /**
+     * It will display another individual line at the bottom of the component with a monthly price. It can be used when you display hourly price, but you have one or many items that are billed monthly.
+     */
+    monthlyFees?: number;
+    /**
+     * Content to display into monthly fees part, it can be any component but in order to have a consistent design, it is recommended to use `<EstimateCost.Regular>` and `<EstimateCost.Strong>` components.
+     */
+    monthlyFeesContent?: ReactNode;
+    /**
+     * Label of the item, it describes what kind of fees is related to. (ex: "Installation fee")
+     */
+    monthlyFeesLabel?: string;
+    /**
+     * Content that will be shown on the left side of the overlay.
+     */
+    OverlayLeft?: (props: {
+        children: ReactNode;
+        disabled?: boolean;
+    }) => JSX.Element;
+    /**
+     * Content that will be shown on the left side of the overlay.
+     */
+    OverlayRight?: (props: {
+        children?: ReactNode;
+        disabled?: boolean;
+    }) => JSX.Element;
+    /**
+     * Time unit to use on the overlay. It can be different from estimate cost.
+     */
+    overlayUnit?: Units;
+    /**
+     * Locales for the component. By default, it will use the english locales.
+     */
+    locales?: typeof EstimateCostLocales;
+    /**
+     * Defines the currency to be shown in the component.
+     * To find out all currencies checkout https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes section "Code" of the table.
+     */
+    currency?: string;
+    /**
+     * Defines the way we display numbers depending on locale (ex: 1,000.00 or 1 000,00).
+     * To understand better please read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales
+     */
+    numberLocales?: string;
+    overlayMargin?: string;
+};
+export type Units = 'seconds' | 'minutes' | 'hours' | 'days' | 'months';
+export type Iteration = {
+    unit: Units;
+    value: number;
+};
+export type BareEstimateProduct = {
+    id: string;
+};
+export type EstimateProduct = BareEstimateProduct & {
+    amount: number;
+    price: number;
+    amountFree: number;
+    isVariant: boolean;
+    maxAmount: number;
+    noIteration: boolean;
+    longFractionDigits: boolean;
+    discount: number;
+};

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

@@ -0,0 +1,11 @@
+import { ProductIcon } from '@ultraviolet/icons';
+import type { ComponentProps } from 'react';
+type FAQProps = {
+    description: string;
+    productIconName?: ComponentProps<typeof ProductIcon>['name'];
+    illustrationText?: number | string;
+    notes?: string;
+    title: string;
+};
+export declare const FAQ: ({ productIconName, illustrationText, title, description, notes, }: FAQProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FAQ/index.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { ProductIcon } from "@ultraviolet/icons";
+import { Card, Stack, Bullet, Text } from "@ultraviolet/ui";
+const StyledCard = styled(Card)`
+  padding: ${({ theme }) => theme.space["2"]};
+  text-align: left;
+`;
+const FAQ = ({
+  productIconName,
+  illustrationText,
+  title,
+  description,
+  notes
+}) => /* @__PURE__ */ jsx(StyledCard, { children: /* @__PURE__ */ jsxs(Stack, { gap: 2, direction: "row", children: [
+  /* @__PURE__ */ jsxs("div", { children: [
+    !productIconName && illustrationText ? /* @__PURE__ */ jsx(Bullet, { sentiment: "primary", text: illustrationText.toString() }) : null,
+    productIconName ? /* @__PURE__ */ jsx(ProductIcon, { name: productIconName, size: "xlarge" }) : null
+  ] }),
+  /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodyStronger", prominence: "strong", children: title }),
+    /* @__PURE__ */ jsxs(Text, { as: "div", variant: "bodySmall", children: [
+      description,
+      notes ? /* @__PURE__ */ jsx(Text, { variant: "caption", as: "small", italic: true, children: notes }) : null
+    ] })
+  ] })
+] }) });
+export {
+  FAQ
+};

package/dist/components/Navigation/Navigation.d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+type NavigationProps = {
+    children: ReactNode;
+    /**
+     * The logo to be displayed in header of the navigation
+     * It can be a component or a function. The function will retrun you
+     * expanded state of the navigation so you can decide to show/hide
+     * some part of your logo
+     */
+    logo?: ReactNode | ((expanded: boolean) => ReactNode);
+    /**
+     * This function is called when resize occur using the vertical bar on the left of the navigation.
+     */
+    onWidthResize?: (width: number) => void;
+    id?: string;
+    className?: string;
+};
+/**
+ * Navigation is a component that allows you to create a sidebar navigation.
+ * You can wrap your navigation items like `<Navigation.Item>` with your router
+ * to make it work in your application.
+ */
+export declare const Navigation: {
+    ({ children, logo, onWidthResize, className, id, }: NavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Group: ({ children, label }: {
+        children: ReactNode;
+        label: string; /**
+         * The logo to be displayed in header of the navigation
+         * It can be a component or a function. The function will retrun you
+         * expanded state of the navigation so you can decide to show/hide
+         * some part of your logo
+         */
+    }) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+    Item: ({ children, categoryIcon, categoryIconVariant, label, subLabel, badgeText, badgeSentiment, href, onClick, onPinUnpinClick, toggle, active, noPinButton, type, hasParents, as, disabled, noExpand, index, id, }: {
+        children?: ReactNode;
+        categoryIcon?: "security" | "console" | "database" | "pin" | "billing" | "storage" | "baremetal" | "webHosting" | "vpc" | "useCase" | "toolsServices" | "serverless" | "observability" | "network" | "managedServices" | "iot" | "documentation" | "dedicatedServer" | "datacenter" | "containers" | "compute" | "ai" | "labs" | "devTools" | "applicationIntegration" | undefined;
+        categoryIconVariant?: "neutral" | "primary" | undefined;
+        label: string;
+        id: string;
+        subLabel?: string | undefined;
+        badgeText?: string | undefined;
+        badgeSentiment?: import("node_modules/@ultraviolet/ui/dist/theme").Color | undefined;
+        href?: string | undefined;
+        onClick?: ((toggle?: boolean | undefined) => void) | undefined;
+        onPinUnpinClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        toggle?: boolean | undefined;
+        active?: boolean | undefined;
+        noPinButton?: boolean | undefined;
+        type?: ("default" | "pinned" | "pinnedGroup") | undefined;
+        hasParents?: boolean | undefined;
+        index?: number | undefined;
+        as?: keyof import("react").JSX.IntrinsicElements | undefined;
+        noExpand?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+    PinnedItems: ({ toggle }: {
+        toggle?: boolean | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+    Separator: () => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/Navigation/Navigation.js

@@ -0,0 +1,29 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { NavigationContent } from "./NavigationContent.js";
+import { Group } from "./components/Group.js";
+import { Item } from "./components/Item.js";
+import { PinnedItems } from "./components/PinnedItems.js";
+import { Separator } from "./components/Separator.js";
+const Navigation = ({
+  children,
+  logo,
+  onWidthResize,
+  className,
+  id
+}) => /* @__PURE__ */ jsx(
+  NavigationContent,
+  {
+    logo,
+    className,
+    onWidthResize,
+    id,
+    children
+  }
+);
+Navigation.Group = Group;
+Navigation.Item = Item;
+Navigation.PinnedItems = PinnedItems;
+Navigation.Separator = Separator;
+export {
+  Navigation
+};

package/dist/components/Navigation/NavigationContent.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+type NavigationContentProps = {
+    children: ReactNode;
+    logo?: ReactNode | ((expanded: boolean) => ReactNode);
+    className?: string;
+    onWidthResize?: (width: number) => void;
+    id?: string;
+};
+export declare const NavigationContent: ({ children, logo, onWidthResize, className, id, }: NavigationContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Navigation/NavigationContent.js

@@ -0,0 +1,264 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Stack, Tooltip, Button } from "@ultraviolet/ui";
+import { useRef, useCallback, useState, useEffect } from "react";
+import { useNavigation } from "./NavigationProvider.js";
+import { NAVIGATION_MAX_WIDTH, NAVIGATION_MIN_WIDTH, NAVIGATION_COLLASPED_WIDTH, ANIMATION_DURATION } from "./constants.js";
+const StyledNav = styled.nav`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral.borderWeak};
+`;
+const Container = styled("div", {
+  shouldForwardProp: (prop) => !["width"].includes(prop)
+})`
+  background: ${({ theme }) => theme.colors.neutral.background};
+  display: flex;
+  flex-direction: column;
+
+  width: ${({ width }) => width}px;
+
+  &[data-expanded='true'][data-animation='false'] {
+    max-width: ${NAVIGATION_MAX_WIDTH}px;
+    min-width: ${NAVIGATION_MIN_WIDTH}px;
+  }
+
+  &[data-expanded='false'] {
+    width: ${NAVIGATION_COLLASPED_WIDTH}px;
+  }
+
+  &[data-animation='expand'] {
+    transition: width ${ANIMATION_DURATION}ms ease-in-out;
+    width: ${({ width }) => width}px;
+  }
+
+  &[data-animation='collapse'] {
+    transition: width ${ANIMATION_DURATION}ms ease-in-out;
+
+    width: ${NAVIGATION_COLLASPED_WIDTH}px;
+  }
+`;
+const StickyFooter = styled.div`
+  display: flex;
+  width: 100%;
+  background: ${({ theme }) => theme.colors.neutral.background};
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral.borderWeak};
+  padding: ${({ theme }) => `${theme.space["1"]} ${theme.space["2"]}`};
+  transition: justify-content ${ANIMATION_DURATION}ms ease-in-out;
+  box-shadow: ${({ theme }) => theme.shadows.defaultShadow};
+  transition: box-shadow 230ms ease-in-out;
+  justify-content: flex-end;
+
+  &[data-has-overflow-style='false'] {
+    box-shadow: none;
+    border: none;
+  }
+`;
+const Header = styled.div`
+  background: ${({ theme }) => theme.colors.neutral.background};
+`;
+const LogoContainer = styled(Stack)`
+  margin: ${({ theme }) => `${theme.space["3"]} ${theme.space["3"]} ${theme.space["2"]} ${theme.space["3"]}`};
+  max-width: 220px;
+  height: 22px;
+`;
+const ContentContainer = styled.div`
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;
+const Content = styled(Stack)`
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-grow: 1;
+
+  &[data-is-expanded='false'] {
+    padding: ${({ theme }) => theme.space["2"]} 0;
+  }
+
+  &[data-is-expanded='true'],
+  &[data-animation='expand'] {
+    padding: ${({ theme }) => theme.space["2"]};
+  }
+`;
+const Slider = styled.div`
+  background: transparent;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 6px;
+  cursor: col-resize;
+  border-right: 2px solid transparent;
+  display: flex;
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary.border};
+  }
+`;
+const NavigationContent = ({
+  children,
+  logo,
+  onWidthResize,
+  className,
+  id
+}) => {
+  const context = useNavigation();
+  if (!context) {
+    throw new Error(
+      "Navigation should be inside NavigationProvider to use it properly."
+    );
+  }
+  const {
+    setWidth,
+    width,
+    expanded,
+    toggleExpand,
+    animation,
+    locales,
+    navigationRef
+  } = context;
+  const sliderRef = useRef(null);
+  const contentRef = useRef(null);
+  const isScrollAtBottom = useCallback(() => {
+    if (contentRef.current) {
+      if (contentRef.current.scrollTop + contentRef.current.offsetHeight >= contentRef.current.scrollHeight) {
+        return false;
+      }
+    }
+    return true;
+  }, []);
+  const [footerHasOverflowStyle, setFooterHasOverflowStyle] = useState(isScrollAtBottom());
+  useEffect(() => {
+    const scroll = () => {
+      const hasOverflow = isScrollAtBottom();
+      if (footerHasOverflowStyle !== hasOverflow) {
+        setFooterHasOverflowStyle(hasOverflow);
+      }
+    };
+    if (contentRef.current) {
+      contentRef.current.addEventListener("scroll", scroll);
+    }
+    return () => {
+      contentRef.current?.removeEventListener("scroll", scroll);
+    };
+  }, [footerHasOverflowStyle, isScrollAtBottom]);
+  useEffect(
+    () => {
+      setFooterHasOverflowStyle(isScrollAtBottom());
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [contentRef.current]
+  );
+  useEffect(() => {
+    let prevX;
+    let navRect;
+    let shouldCollapseOnMouseUp = false;
+    let shouldExpandOnMouseUp = false;
+    const mouseMove = (event) => {
+      if (prevX !== void 0) {
+        const navWidth = navRect?.width ?? 0;
+        const newWidth = navWidth + (event.clientX - prevX);
+        if (navigationRef.current && expanded) {
+          navigationRef.current.style.width = `${newWidth}px`;
+        }
+        if (newWidth <= NAVIGATION_MIN_WIDTH) {
+          shouldCollapseOnMouseUp = true;
+        } else {
+          shouldCollapseOnMouseUp = false;
+        }
+        if (newWidth >= NAVIGATION_COLLASPED_WIDTH && !expanded) {
+          shouldExpandOnMouseUp = true;
+        } else {
+          shouldExpandOnMouseUp = false;
+        }
+      }
+    };
+    const mousedown = (event) => {
+      document.body.style.pointerEvents = "none";
+      document.body.style.userSelect = "none";
+      prevX = event.clientX;
+      navRect = navigationRef.current?.getBoundingClientRect();
+      const mouseup = () => {
+        if (shouldCollapseOnMouseUp || shouldExpandOnMouseUp) {
+          toggleExpand();
+        }
+        if (navigationRef.current) {
+          if (!shouldCollapseOnMouseUp && !shouldExpandOnMouseUp) {
+            onWidthResize?.(navigationRef.current.offsetWidth);
+            setWidth?.(navigationRef.current.offsetWidth);
+          }
+          if (!expanded) {
+            navigationRef.current.style.width = "";
+          }
+        }
+        document.removeEventListener("mousemove", mouseMove);
+        window.removeEventListener("mouseup", mouseup);
+        document.body.style.pointerEvents = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", mouseMove);
+      window.addEventListener("mouseup", mouseup);
+    };
+    sliderRef.current?.addEventListener("mousedown", mousedown);
+    return () => {
+      sliderRef.current?.removeEventListener("mousedown", mousedown);
+    };
+  }, [expanded, navigationRef, onWidthResize, setWidth, toggleExpand]);
+  return /* @__PURE__ */ jsxs(StyledNav, { className, id, children: [
+    /* @__PURE__ */ jsxs(
+      Container,
+      {
+        ref: navigationRef,
+        "data-animation": animation,
+        "data-expanded": expanded,
+        width,
+        children: [
+          /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(
+            LogoContainer,
+            {
+              justifyContent: !expanded ? "center" : void 0,
+              alignItems: "start",
+              children: typeof logo === "function" ? logo(animation ? false : expanded) : logo
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(ContentContainer, { children: [
+            /* @__PURE__ */ jsx(
+              Content,
+              {
+                ref: contentRef,
+                gap: 0.25,
+                "data-is-expanded": expanded,
+                "data-animation": animation,
+                children
+              }
+            ),
+            /* @__PURE__ */ jsx(StickyFooter, { "data-has-overflow-style": footerHasOverflowStyle, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                text: expanded ? locales["navigation.collapse.button"] : locales["navigation.expand.button"],
+                placement: "right",
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    sentiment: "neutral",
+                    size: "small",
+                    icon: expanded ? "arrow-left-double" : "arrow-right-double",
+                    onClick: () => toggleExpand()
+                  }
+                )
+              }
+            ) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Slider, { ref: sliderRef })
+  ] });
+};
+export {
+  NavigationContent
+};

package/dist/components/Navigation/NavigationProvider.d.ts

@@ -0,0 +1,87 @@
+import type { Dispatch, ReactNode, RefObject } from 'react';
+import NavigationLocales from './locales/en';
+type Item = {
+    label: string;
+    active?: boolean;
+    onClick?: (toggle?: true | false) => void;
+};
+type Items = Record<string, Item>;
+type ContextProps = {
+    expanded: boolean;
+    toggleExpand: (toggle?: boolean) => void;
+    animation: boolean | 'expand' | 'collapse';
+    pinnedFeature?: boolean;
+    onClickPinUnpin?: (pinned: string[]) => void;
+    pinItem: (item: string) => void;
+    unpinItem: (item: string) => void;
+    pinnedItems: string[];
+    pinLimit: number;
+    navigationRef: RefObject<HTMLDivElement>;
+    locales: typeof NavigationLocales;
+    width: number;
+    setWidth: (width: number) => void;
+    /**
+     * This function will reorder the pinned items based on the initial index and
+     * the end index.
+     */
+    reorderItems: (
+    /**
+     * The initial index of the item
+     */
+    initialIndex: number, 
+    /**
+     * The end index of the item
+     */
+    endIndex: number) => void;
+    items: Items;
+    registerItem: Dispatch<Items>;
+};
+export declare const NavigationContext: import("react").Context<ContextProps>;
+export declare const useNavigation: () => ContextProps;
+type NavigationProviderProps = {
+    children: ReactNode;
+    initialWidth?: number;
+    /**
+     * This enable / disable the pinned feature of the navigation
+     * Pinned allows the use to pin (or favorite) some items in the navigation
+     */
+    pinnedFeature?: boolean;
+    /**
+     * This define how many items can be pinned at the same time.
+     * If you want to disable the limit just set `Infinity` to this prop
+     */
+    pinLimit?: number;
+    /**
+     * The initial pinned items. This should be an array of labels you've set on
+     * your `<Navigation.Item>`
+     */
+    initialPinned?: string[];
+    /**
+     * The initial expanded state of the navigation. If set to true the
+     * navigation will be expanded by default otherwise it will be collapsed
+     */
+    initialExpanded?: boolean;
+    locales?: typeof NavigationLocales;
+    /**
+     * This function is triggered when user click on expand button on the footer
+     * of the navigation. This is not triggered when the user resize the navigation
+     * and it automatically collapse / expand.
+     */
+    onClickExpand?: (expanded: boolean) => void;
+    /**
+     * This function is triggered when the user click on the pin/unpin button
+     * of an item. To access all pinned item you can use the `useNavigation` hook
+     * and access the `pinnedItems` property.
+     */
+    onClickPinUnpin?: (
+    /**
+     * The state of the item after the click
+     */
+    state: 'pin' | 'unpin', 
+    /**
+     * The current items that has been pinned on click
+     */
+    pinned: string) => void;
+};
+export declare const NavigationProvider: ({ children, pinnedFeature, initialPinned, initialExpanded, locales, pinLimit, onClickExpand, initialWidth, onClickPinUnpin, }: NavigationProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};