@ultraviolet/plus 0.15.0 → 0.15.2

package/dist/{src/components → components}/EstimateCost/helper.js

@@ -1,7 +1,4 @@
-import { multiplier } from './constants.js';
-
-// time unit = hours, days, months
-// timeAmount = number of hours / days / months
+import { multiplier } from "./constants.js";
 const calculatePrice = ({
   price,
   amount,
@@ -12,12 +9,11 @@ const calculatePrice = ({
 }) => {
   const nonNanTimeAmount = Number.isNaN(timeAmount) ? 0 : timeAmount;
   const value = (price - price * discount) * (nonNanTimeAmount * multiplier[`${timeUnit}`]) * Math.max(amount - amountFree, 0);
-
-  // Avoid having negative price in any cases
   if (value < 0) {
     return 0;
   }
   return value;
 };
-
-export { calculatePrice };
+export {
+  calculatePrice
+};

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

@@ -0,0 +1,3 @@
+import estimateCostDefaultLocales from './locales/en';
+export { EstimateCost } from './EstimateCost';
+export { estimateCostDefaultLocales };

package/dist/components/EstimateCost/locales/en.d.ts

@@ -0,0 +1,22 @@
+declare const _default: {
+    readonly 'estimate.cost.description': "This summary provides a cost estimation based on your configuration, the amount of time you expect to use the resource for, and the scale of your expected usage. For the purposes of this calculation, we consider that 1 month equals to 730 hours.";
+    readonly 'estimate.cost.label': "Estimated cost";
+    readonly 'estimate.cost.beta.free': "Free During Beta";
+    readonly 'estimate.cost.beta.discount': "% off during Beta";
+    readonly 'estimate.cost.beta.badge': "Beta Version";
+    readonly 'estimate.cost.units.seconds.label': "Second(s)";
+    readonly 'estimate.cost.units.minutes.label': "Minute(s)";
+    readonly 'estimate.cost.units.hours.label': "Hour(s)";
+    readonly 'estimate.cost.units.days.label': "Day(s)";
+    readonly 'estimate.cost.units.months.label': "Month(s)";
+    readonly 'estimate.cost.units.years.label': "Year(s)";
+    readonly 'estimate.cost.fees.oneTime.title': "One time fees";
+    readonly 'estimate.cost.fees.monthly.title': "Each month";
+    readonly 'estimate.cost.fees.commitment': "Commitment Fees";
+    readonly 'estimate.cost.units.gb.label': "GB";
+    readonly 'estimate.cost.notDefined': "Not defined";
+    readonly 'estimate.cost.submit.label': "Create";
+    readonly 'estimate.cost.region.label': "Region";
+    readonly 'estimate.cost.az.label': "Availability Zone";
+};
+export default _default;

package/dist/components/EstimateCost/locales/en.js

@@ -0,0 +1,24 @@
+const EstimateCostLocales = {
+  "estimate.cost.description": "This summary provides a cost estimation based on your configuration, the amount of time you expect to use the resource for, and the scale of your expected usage. For the purposes of this calculation, we consider that 1 month equals to 730 hours.",
+  "estimate.cost.label": "Estimated cost",
+  "estimate.cost.beta.free": "Free During Beta",
+  "estimate.cost.beta.discount": "% off during Beta",
+  "estimate.cost.beta.badge": "Beta Version",
+  "estimate.cost.units.seconds.label": "Second(s)",
+  "estimate.cost.units.minutes.label": "Minute(s)",
+  "estimate.cost.units.hours.label": "Hour(s)",
+  "estimate.cost.units.days.label": "Day(s)",
+  "estimate.cost.units.months.label": "Month(s)",
+  "estimate.cost.units.years.label": "Year(s)",
+  "estimate.cost.fees.oneTime.title": "One time fees",
+  "estimate.cost.fees.monthly.title": "Each month",
+  "estimate.cost.fees.commitment": "Commitment Fees",
+  "estimate.cost.units.gb.label": "GB",
+  "estimate.cost.notDefined": "Not defined",
+  "estimate.cost.submit.label": "Create",
+  "estimate.cost.region.label": "Region",
+  "estimate.cost.az.label": "Availability Zone"
+};
+export {
+  EstimateCostLocales as default
+};

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,34 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import _styled from "@emotion/styled/base";
+import { ProductIcon } from "@ultraviolet/icons";
+import { Card, Stack, Bullet, Text } from "@ultraviolet/ui";
+const StyledCard = /* @__PURE__ */ _styled(Card, process.env.NODE_ENV === "production" ? {
+  target: "ebaosvo0"
+} : {
+  target: "ebaosvo0",
+  label: "StyledCard"
+})("padding:", ({
+  theme
+}) => theme.space["2"], ";text-align:left;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvRkFRL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLK0IiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvcGx1cy9zcmMvY29tcG9uZW50cy9GQVEvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBQcm9kdWN0SWNvbiB9IGZyb20gJ0B1bHRyYXZpb2xldC9pY29ucydcbmltcG9ydCB7IEJ1bGxldCwgQ2FyZCwgU3RhY2ssIFRleHQgfSBmcm9tICdAdWx0cmF2aW9sZXQvdWknXG5pbXBvcnQgdHlwZSB7IENvbXBvbmVudFByb3BzIH0gZnJvbSAncmVhY3QnXG5cbmNvbnN0IFN0eWxlZENhcmQgPSBzdHlsZWQoQ2FyZClgXG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG4gIHRleHQtYWxpZ246IGxlZnQ7XG5gXG5cbnR5cGUgRkFRUHJvcHMgPSB7XG4gIGRlc2NyaXB0aW9uOiBzdHJpbmdcbiAgcHJvZHVjdEljb25OYW1lPzogQ29tcG9uZW50UHJvcHM8dHlwZW9mIFByb2R1Y3RJY29uPlsnbmFtZSddXG4gIGlsbHVzdHJhdGlvblRleHQ/OiBudW1iZXIgfCBzdHJpbmdcbiAgbm90ZXM/OiBzdHJpbmdcbiAgdGl0bGU6IHN0cmluZ1xufVxuXG5leHBvcnQgY29uc3QgRkFRID0gKHtcbiAgcHJvZHVjdEljb25OYW1lLFxuICBpbGx1c3RyYXRpb25UZXh0LFxuICB0aXRsZSxcbiAgZGVzY3JpcHRpb24sXG4gIG5vdGVzLFxufTogRkFRUHJvcHMpID0+IChcbiAgPFN0eWxlZENhcmQ+XG4gICAgPFN0YWNrIGdhcD17Mn0gZGlyZWN0aW9uPVwicm93XCI+XG4gICAgICA8ZGl2PlxuICAgICAgICB7IXByb2R1Y3RJY29uTmFtZSAmJiBpbGx1c3RyYXRpb25UZXh0ID8gKFxuICAgICAgICAgIDxCdWxsZXQgc2VudGltZW50PVwicHJpbWFyeVwiIHRleHQ9e2lsbHVzdHJhdGlvblRleHQudG9TdHJpbmcoKX0gLz5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICAgIHtwcm9kdWN0SWNvbk5hbWUgPyAoXG4gICAgICAgICAgPFByb2R1Y3RJY29uIG5hbWU9e3Byb2R1Y3RJY29uTmFtZX0gc2l6ZT1cInhsYXJnZVwiIC8+XG4gICAgICAgICkgOiBudWxsfVxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2PlxuICAgICAgICA8VGV4dCBhcz1cInBcIiB2YXJpYW50PVwiYm9keVN0cm9uZ2VyXCIgcHJvbWluZW5jZT1cInN0cm9uZ1wiPlxuICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgICA8VGV4dCBhcz1cImRpdlwiIHZhcmlhbnQ9XCJib2R5U21hbGxcIj5cbiAgICAgICAgICB7ZGVzY3JpcHRpb259XG4gICAgICAgICAge25vdGVzID8gKFxuICAgICAgICAgICAgPFRleHQgdmFyaWFudD1cImNhcHRpb25cIiBhcz1cInNtYWxsXCIgaXRhbGljPlxuICAgICAgICAgICAgICB7bm90ZXN9XG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgKSA6IG51bGx9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvZGl2PlxuICAgIDwvU3RhY2s+XG4gIDwvU3R5bGVkQ2FyZD5cbilcbiJdfQ== */"));
+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,20 @@
+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 {};