@ultraviolet/plus 0.4.10 → 0.5.1

package/dist/index.d.ts

@@ -3,6 +3,9 @@ import { ReactNode, MouseEventHandler, ComponentProps } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import CodeMirror from '@uiw/react-codemirror';
+import { Alert } from '@ultraviolet/ui';
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
 
 type ContentCardProps = {
     direction?: 'row' | 'column';
@@ -62,4 +65,261 @@ type CodeEditorProps = {
 };
 declare const CodeEditor: ({ title, value, onChange, extensions, onBlur, height, readOnly, }: CodeEditorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-export { CodeEditor, ContentCard, ContentCardGroup };
+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";
+};
+
+type EstimateCostProps = {
+    /**
+     * Text to display into an alert on the top of the EstimateCost component.
+     */
+    alert?: ReactNode;
+    /**
+     * 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;
+    /**
+     * 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 _default;
+    /**
+     * 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;
+};
+type Units = 'seconds' | 'minutes' | 'hours' | 'days' | 'months';
+type Iteration = {
+    unit: Units;
+    value: number;
+};
+type BareEstimateProduct = {
+    id: string;
+};
+type EstimateProduct = BareEstimateProduct & {
+    amount: number;
+    price: number;
+    amountFree: number;
+    isVariant: boolean;
+    maxAmount: number;
+    noIteration: boolean;
+    longFractionDigits: boolean;
+    discount: number;
+};
+
+declare const EstimateCost: {
+    ({ description, alert, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, discount, OverlayRight, OverlayLeft, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, numberLocales, currency, }: EstimateCostProps): _emotion_react_jsx_runtime.JSX.Element;
+    LineThrough: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    } & {
+        isActive?: boolean | undefined;
+    }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+    Item: ({ discount, priceText, discountText, label, tooltipInfo, subLabel, price: basePrice, monthlyPrice, unit: baseUnit, amount: currentAmount, onAmountChange, amountFree, maxAmount, longFractionDigits, noIteration, noIterationText, noBorder, noPrice, isDefined, children, isFirstElement, isLastElement, isPrimaryBackground, productsCallback, iteration: receivedIteration, shouldBeHidden, hideFromOverlay, textNotDefined, animated, tabulation, labelTextVariant, labelTextProminence, notice, }: {
+        amount?: number | undefined;
+        amountFree?: number | undefined;
+        animated?: boolean | undefined;
+        children?: ReactNode;
+        discount?: number | undefined;
+        discountText?: string | undefined;
+        hideFromOverlay?: boolean | undefined;
+        isDefined?: boolean | undefined;
+        isFirstElement?: boolean | undefined;
+        isLastElement?: boolean | undefined;
+        isPrimaryBackground?: boolean | undefined;
+        iteration?: Iteration | undefined;
+        label?: ReactNode;
+        labelTextVariant?: "body" | "caption" | "code" | "heading" | "bodySmall" | "bodySmallStrong" | "bodySmallStronger" | "bodyStrong" | "bodyStronger" | "captionSmall" | "captionSmallStrong" | "captionSmallStronger" | "captionStrong" | "captionStronger" | "headingLarge" | "headingSmall" | undefined;
+        labelTextProminence?: "strong" | "default" | "stronger" | "weak" | undefined;
+        longFractionDigits?: boolean | undefined;
+        maxAmount?: number | undefined;
+        monthlyPrice?: number | undefined;
+        noBorder?: boolean | undefined;
+        noIteration?: boolean | undefined;
+        noIterationText?: string | undefined;
+        noPrice?: boolean | undefined;
+        notice?: string | undefined;
+        onAmountChange?: ((amount: number) => void) | undefined;
+        price?: number | undefined;
+        priceText?: ReactNode;
+        productsCallback?: {
+            add: (product: EstimateProduct) => void;
+            remove: (product: BareEstimateProduct) => void;
+        } | undefined;
+        shouldBeHidden?: boolean | undefined;
+        subLabel?: string | undefined;
+        tabulation?: number | undefined;
+        textNotDefined?: string | undefined;
+        tooltipInfo?: string | undefined;
+        unit?: (string & {}) | "seconds" | "minutes" | "hours" | "days" | "months" | "mb" | "gb" | "tb" | "years" | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    NumberInput: ({ amount, minValue, maxValue, getAmountValue, itemCallback, }: {
+        amount?: number | undefined;
+        itemCallback?: ((amount?: number | undefined, isVariant?: boolean | undefined) => void) | undefined;
+        getAmountValue?: ((amount?: number | undefined) => void) | undefined;
+        minValue?: number | undefined;
+        maxValue?: number | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Unit: ({ amount, itemCallback, getAmountValue, unit, }: {
+        amount?: number | undefined;
+        itemCallback?: ((amount?: number | undefined, isVariant?: boolean | undefined) => void) | undefined;
+        getAmountValue?: ((amount?: number | undefined) => void) | undefined;
+        unit?: string | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Strong: ({ variant, children, isDisabledOnOverlay, }: {
+        variant?: "big" | "small" | "normal" | "capitalized" | undefined;
+        children?: ReactNode;
+        isDisabledOnOverlay?: boolean | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Regular: ({ variant, isDisabledOnOverlay, children, className, }: {
+        variant?: "big" | "small" | "normal" | "capitalized" | undefined;
+        isDisabledOnOverlay?: boolean | undefined;
+        children?: ReactNode;
+        className?: string | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element | null;
+    Image: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    }, react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+    Region: ({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, }: {
+        shouldBeHidden?: boolean | undefined;
+        priceText?: ReactNode;
+        animated?: boolean | undefined;
+        isFirstElement?: boolean | undefined;
+        isLastElement?: boolean | undefined;
+        productsCallback?: {
+            add: (product: EstimateProduct) => void;
+            remove: (product: BareEstimateProduct) => void;
+        } | undefined;
+        iteration?: Iteration | undefined;
+        discount?: number | undefined;
+        label: string;
+        image: string;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Zone: ({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, }: {
+        shouldBeHidden?: boolean | undefined;
+        priceText?: string | undefined;
+        animated?: boolean | undefined;
+        isFirstElement?: boolean | undefined;
+        isLastElement?: boolean | undefined;
+        productsCallback?: {
+            add: (product: EstimateProduct) => void;
+            remove: (product: BareEstimateProduct) => void;
+        } | undefined;
+        iteration?: Iteration | undefined;
+        discount?: number | undefined;
+        label: string;
+        image: string;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    Ellipsis: ({ children, maxWidth, "data-testid": dataTestId, }: {
+        children: ReactNode;
+        maxWidth?: number | undefined;
+        'data-testid'?: string | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+};
+
+export { CodeEditor, ContentCard, ContentCardGroup, EstimateCost };

package/dist/src/components/ContentCard/index.js

@@ -184,7 +184,7 @@ const ContentCard = /*#__PURE__*/forwardRef((_ref14, ref) => {
                   children: subtitle
                 }) : null, jsx(Text, {
                   as: "h3",
-                  variant: "bodyStronger",
+                  variant: "bodyStrong",
                   sentiment: "neutral",
                   children: title
                 })]

package/dist/src/components/ContentCardGroup/Card.js

@@ -6,7 +6,7 @@ import { Icon } from '../../../@ultraviolet/icons/dist/components/Icon/index.js'
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const StyledStack = /*#__PURE__*/_styled(Stack, {
-  target: "eqcw8nr2"
+  target: "eqcw8nr3"
 })(process.env.NODE_ENV === "production" ? {
   name: "ovk77c",
   styles: "min-width:0"
@@ -16,7 +16,7 @@ const StyledStack = /*#__PURE__*/_styled(Stack, {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const IconWrapper = /*#__PURE__*/_styled("div", {
-  target: "eqcw8nr1"
+  target: "eqcw8nr2"
 })("display:inline-flex;background:", _ref => {
   let {
     theme
@@ -34,29 +34,59 @@ const IconWrapper = /*#__PURE__*/_styled("div", {
   return theme.radii.default;
 }, ";");
 const StyledWrapper = /*#__PURE__*/_styled("a", {
-  target: "eqcw8nr0"
-})("display:block;padding:", _ref4 => {
+  target: "eqcw8nr1"
+})("padding:", _ref4 => {
   let {
     theme
   } = _ref4;
   return theme.space['3'];
-}, ";text-decoration:none;&:not(:first-child){border-top:1px solid ", _ref5 => {
+}, ";text-decoration:none;height:100%;&:not(:first-child){border-top:1px solid ", _ref5 => {
   let {
     theme
   } = _ref5;
   return theme.colors.neutral.border;
-}, ";}& ", IconWrapper, "{background:", _ref6 => {
+}, ";}&:first-child{border-radius:", _ref6 => {
   let {
     theme
   } = _ref6;
-  return theme.colors.neutral.backgroundWeak;
-}, ";}&:hover{background:", _ref7 => {
+  return theme.radii.default;
+}, " ", _ref7 => {
   let {
     theme
   } = _ref7;
+  return theme.radii.default;
+}, " 0 0;}&:last-child{border-radius:0 0 ", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.radii.default;
+}, " ", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.radii.default;
+}, ";}& ", IconWrapper, "{background:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral.backgroundWeak;
+}, ";}&:hover{background:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
   return theme.colors.neutral.backgroundHover;
 }, ";& ", IconWrapper, "{background:none;}}");
-const Card = /*#__PURE__*/forwardRef((_ref8, ref) => {
+const FullHeightStack = /*#__PURE__*/_styled(Stack, {
+  target: "eqcw8nr0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "13udsys",
+  styles: "height:100%"
+} : {
+  name: "13udsys",
+  styles: "height:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Card = /*#__PURE__*/forwardRef((_ref12, ref) => {
   let {
     title,
     subtitle,
@@ -64,12 +94,12 @@ const Card = /*#__PURE__*/forwardRef((_ref8, ref) => {
     children,
     href,
     target = '_blank'
-  } = _ref8;
+  } = _ref12;
   return jsx(StyledWrapper, {
     href: href,
     target: target,
     ref: ref,
-    children: jsxs(Stack, {
+    children: jsxs(FullHeightStack, {
       direction: "row",
       gap: 2,
       alignItems: "center",

package/dist/src/components/EstimateCost/Components/CustomUnitInput.js

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { useEstimateCost } from '../EstimateCostProvider.js';
+import { UnitInput } from './UnitInput.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const CustomUnitInput = _ref => {
+  let {
+    defaultTimeUnit = 'hours',
+    setIteration,
+    iteration,
+    timeUnits
+  } = _ref;
+  const {
+    locales
+  } = useEstimateCost();
+  const options = useMemo(() => timeUnits.map(unit => ({
+    value: unit,
+    label: locales[`estimate.cost.units.${unit}.label`]
+  })), [timeUnits, locales]);
+  const defaultOption = useMemo(() => options.find(_ref2 => {
+    let {
+      value
+    } = _ref2;
+    return value === defaultTimeUnit;
+  }), [defaultTimeUnit, options]);
+  return jsx(UnitInput, {
+    name: "iteration",
+    onChange: inputValue => setIteration({
+      unit: iteration.unit,
+      value: inputValue
+    }),
+    onChangeUnitValue: unitValue => {
+      setIteration({
+        unit: unitValue,
+        value: iteration.value
+      });
+    },
+    placeholder: "0",
+    value: iteration.value,
+    unitValue: iteration.unit || defaultOption?.value,
+    minValue: 1,
+    size: "medium",
+    options: options,
+    selectInputWidth: 300
+  });
+};
+
+export { CustomUnitInput };