@rabbitio/ui-kit 1.0.0-beta.70 → 1.0.0-beta.72

package/src/{components → ui-kit/components}/atoms/buttons/RadioButtonWithText/radio-button-with-text.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../../styles/index";
+@import "../../../../assets/styles/index";
 
 .radio-button-with-text-container {
     display: flex;

package/src/{components → ui-kit/components}/molecules/AmountInput/AmountInput.jsx

@@ -4,15 +4,16 @@ import { BigNumber } from "bignumber.js";
 import s from "./amount-input.module.scss";
 import WalletIcon from "../../../assets/wrappedImages/walletIcon.jsx";
 
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
-import { InputValuesProviders } from "../../utils/inputValueProviders.js";
-import { logErrorOrOutputToConsole } from "../../../common/errorUtils.js";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { InputValuesProviders } from "../../../utils/inputValueProviders.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
 
 import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
-import { AmountUtils } from "../../../common/amountUtils.js";
+import { AmountUtils } from "../../../../common-apis/amountUtils.js";
 import { AssetSelection } from "../../atoms/AssetSelection/AssetSelection.jsx";
 import { Validation } from "../../atoms/Validation/Validation.jsx";
 
+// TODO: [dev] add JSDoc
 export const AmountInput = React.forwardRef(
     (
         {

package/src/{components → ui-kit/components}/molecules/AmountInput/amount-input.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .amount-input-container {
     padding: Padding("5");

package/src/{components → ui-kit/components}/molecules/CoinPicker/CoinPicker.jsx

@@ -4,14 +4,14 @@ import PropTypes from "prop-types";
 import s from "./coin-picker.module.scss";
 import ArrowIcon from "../../../assets/wrappedImages/arrowIcon.jsx";
 
-import { useReferredState } from "../../hooks/useReferredState.js";
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
-import { logErrorOrOutputToConsole } from "../../../common/errorUtils.js";
+import { useReferredState } from "../../../hooks/useReferredState.js";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
 
 import { RadioButtonWithText } from "../../atoms/buttons/RadioButtonWithText/RadioButtonWithText.jsx";
 import { Input } from "../../atoms/Input/Input.jsx";
 import { InformationMessage } from "../../atoms/InformationMessage/InformationMessage.jsx";
-import { FALLBACK_ASSET_ICON_URL } from "../../../constants/globalConstants.jsx";
+import { FALLBACK_ASSET_ICON_URL } from "../../../../common-apis/globalConstants.jsx";
 import { AssetIcon } from "../../atoms/AssetIcon/AssetIcon.jsx";
 import { Button } from "../../atoms/buttons/Button/Button.jsx";
 import { LoadingDots } from "../../atoms/LoadingDots/LoadingDots.jsx";
@@ -44,27 +44,29 @@ const defaultTexts = {
  *   - you MUST NOT pass setCoinPickerValue (it will be ignored)
  *   - if you don't pass loadCoinsAndContent function, you MUST pass allCoins
  *
- * @param [mode] {string} one-time button selection or multi-selection via toggles, available options are located in COIN_PICKER_MODES
- * @param [allCoins] {Coin[]} all coins despite on their enabled/disabled status. Pass this list if you use CHECKBOX mode or you don't pass the loadCoinsAndContent function
- * @param [initiallyEnabledCoinsList] {Coin[]} - pass this when using CHECKBOX mode
- * @param [handleClick] {function} handler function for the event when an asset is clicked
- * @param [triggerToReloadData] {number|undefined} trigger to reload the component when some related data changes
- * @param [search=false] {boolean} whether to show the search bar above the assets list, when enabled overrides searchAdaptive and locks the list height
- * @param [searchAdaptive=true] {boolean} show search bar only after six assets in the list
- * @param [setCoinPickerValue] {function} is called with the only parameter (final enabled tickers list) when closing/confirming dialog in CHECKBOX mode
- * @param [setCoinPickerListChanged] {function} is called with the only parameter (flag signalling that the list of enabled coins was changed - true, or was not changed - false) when closing/confirming dialog in CHECKBOX mode
- * @param [loadCoinsAndContent] {function} optional, you can provide it if you need custom logic for coins list composing or custom subtitles
- *                              {
- *                                  coins: Coin[],
- *                                  content: { coin: Coin, subtitle: string }[],
- *                                  isCoinsDataReloadable: boolean
- *                              }
- * @param [showRequestMissingCoinsInfoMessage=true] {boolean} whether to show message about advising missing coins
- * @param [supportUrl] {string} needed when showRequestMissingCoinsInfoMessage=true
- * @param coinToIconPaths {function}
- * @param [partialLoadingEnabled=true] {boolean} enables only partialLoadingIncrement items are shown by default and user can show more clicking the load-more button
- * @param [partialLoadingIncrement=100]
- * @param [texts] {object} texts translated to desired locale, default texts use english locale
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} [props.mode] - One-time button selection or multi-selection via toggles, available options are located in COIN_PICKER_MODES.
+ * @param {Coin[]} [props.allCoins] - All coins despite their enabled/disabled status. Pass this list if you use CHECKBOX mode or you don't pass the loadCoinsAndContent function.
+ * @param {Coin[]} [props.initiallyEnabledCoinsList] - Pass this when using CHECKBOX mode.
+ * @param {function} [props.handleClick] - Handler function for the event when an asset is clicked.
+ * @param {number|undefined} [props.triggerToReloadData] - Trigger to reload the component when some related data changes.
+ * @param {boolean} [props.search=false] - Whether to show the search bar above the assets list, when enabled overrides searchAdaptive and locks the list height.
+ * @param {boolean} [props.searchAdaptive=true] - Show search bar only after six assets in the list.
+ * @param {function} [props.setCoinPickerValue] - Called with the only parameter (final enabled tickers list) when closing/confirming dialog in CHECKBOX mode.
+ * @param {function} [props.setCoinPickerListChanged] - Called with the only parameter (flag signaling that the list of enabled coins was changed - true, or was not changed - false) when closing/confirming dialog in CHECKBOX mode.
+ * @param {function} [props.loadCoinsAndContent] - Optional, you can provide it if you need custom logic for coins list composing or custom subtitles. Expected return format:
+ *                               {
+ *                                   coins: Coin[],
+ *                                   content: { coin: Coin, subtitle: string }[],
+ *                                   isCoinsDataReloadable: boolean
+ *                               }
+ * @param {boolean} [props.showRequestMissingCoinsInfoMessage=true] - Whether to show message about advising missing coins.
+ * @param {string} [props.supportUrl] - Needed when showRequestMissingCoinsInfoMessage=true.
+ * @param {function} props.coinToIconPaths - Function to map coins to their icon paths.
+ * @param {boolean} [props.partialLoadingEnabled=true] - Enables only partialLoadingIncrement items to be shown by default, with the user able to show more by clicking the load-more button.
+ * @param {number} [props.partialLoadingIncrement=100] - The number of items to incrementally load when partial loading is enabled.
+ * @param {object} [props.texts] - Texts translated to the desired locale; default texts use English locale.
  */
 export const CoinPicker = ({
     mode = COIN_PICKER_MODES.BUTTON,

package/src/{components → ui-kit/components}/molecules/CoinPicker/coin-picker.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .coin-picker {
     display: flex;

package/src/{components → ui-kit/components}/molecules/LineWithIconLink/line-with-icon-link.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .line-with-icon-link {
     display: flex;

package/src/{components → ui-kit/components}/molecules/TitledLineWithIconLink/TitledLineWithIconLink.jsx

@@ -1,16 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { TitleBox } from "../../atoms/TitleBox/TitleBox";
-import { LineWithIconLink } from "../LineWithIconLink/LineWithIconLink";
+import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
+import { LineWithIconLink } from "../LineWithIconLink/LineWithIconLink.jsx";
 
 /**
  * TitledLineWithIconLink component renders a title box with a text line that includes an icon with a clickable link.
  *
- * @param {string} title - The title to display in the TitleBox.
- * @param {string} text - The text to display in the LineWithIconLink.
- * @param {string} icon - The icon to display next to the text in the LineWithIconLink.
- * @param {string} url - The URL for the LineWithIconLink.
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.title - The title to display in the TitleBox.
+ * @param {string} props.text - The text to display in the LineWithIconLink.
+ * @param {string} props.icon - The icon to display next to the text in the LineWithIconLink.
+ * @param {string} props.url - The URL for the LineWithIconLink.
  */
 export const TitledLineWithIconLink = ({ title, text, icon, url }) => {
     return (

package/src/{components → ui-kit/components}/organisms/CoinPickerDialogStep/CoinPickerDialogStep.jsx

@@ -2,8 +2,10 @@ import React from "react";
 
 import { CoinPicker } from "../../molecules/CoinPicker/CoinPicker.jsx";
 import { DialogStep } from "../Dialog/DialogStep/DialogStep.jsx";
-import { DIALOG_SIZES } from "../../../constants/organisms/dialog/dialog.js";
 
+import { DIALOG_SIZES } from "../Dialog/Dialog.jsx";
+
+// TODO: [dev] add JSDoc
 export const CoinPickerDialogStep = ({
     stepName,
     controls,

package/src/{components → ui-kit/components}/organisms/Dialog/Dialog.jsx

@@ -3,17 +3,46 @@ import PropTypes from "prop-types";
 import { CSSTransition } from "react-transition-group";
 import AnimateHeight from "react-animate-height";
 import ResizeObserver from "resize-observer-polyfill";
-import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock";
+import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import animateScrollTo from "animated-scroll-to";
 
-import { useReferredState } from "../../hooks/useReferredState";
-import { logErrorOrOutputToConsole } from "../../../common/errorUtils";
-import { DIALOG_TRANSITION_STEP_DURATION, DIALOG_SIZES } from "../../../constants/organisms/dialog/dialog";
+import { useReferredState } from "../../../hooks/useReferredState.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
 
 import s from "./dialog.module.scss";
-import { Close } from "../../atoms/buttons/Close/Close";
-import { DialogButtons } from "./DialogButtons/DialogButtons";
+import { Close } from "../../atoms/buttons/Close/Close.jsx";
+import { DialogButtons } from "./DialogButtons/DialogButtons.jsx";
+
+export const DIALOG_SIZES = {
+    small: {
+        width: "550px",
+        height: "650px",
+    },
+    regular: {
+        width: "600px",
+        height: "650px",
+    },
+    large: {
+        width: "700px",
+        height: "650px",
+    },
+    largePlus: {
+        width: "750px",
+        height: "650px",
+    },
+    largePlusPlus: {
+        width: "800px",
+        height: "650px",
+    },
+    extraLarge: {
+        width: "1000px",
+        height: "650px",
+    },
+};
+
+export const DIALOG_TRANSITION_STEP_DURATION = 200;
 
+// If changed - update the prop configuration in the stories and related components.
 /**
  * Flexible modal window component with support for multiple steps. Can be used as an inline component and inserted in regular layouts. Only <DialogStep> components can be passed as children.
  *

package/src/{components → ui-kit/components}/organisms/Dialog/DialogButtons/DialogButtons.jsx

@@ -1,11 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors";
+import { useCallHandlingErrors } from "../../../../hooks/useCallHandlingErrors.js";
 
 import s from "./dialog-buttons.module.scss";
-import { LinkButton } from "../../../atoms/buttons/LinkButton/LinkButton";
-import { Button } from "../../../atoms/buttons/Button/Button";
+import { LinkButton } from "../../../atoms/buttons/LinkButton/LinkButton.jsx";
+import { Button } from "../../../atoms/buttons/Button/Button.jsx";
 
 /**
  * Renders a dialog component with configurable primary and secondary buttons.

package/src/{components → ui-kit/components}/organisms/Dialog/DialogButtons/dialog-buttons.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../../styles/index";
+@import "../../../../assets/styles/index";
 
 .dialog-buttons {
     display: flex;

package/src/{components → ui-kit/components}/organisms/Dialog/DialogStep/DialogStep.jsx

@@ -1,60 +1,62 @@
 import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 
-import { logErrorOrOutputToConsole } from "../../../../common/errorUtils";
-import { DIALOG_STEP_CLASS } from "../../../../constants/organisms/dialog/DialogStep/dialogStep";
-import { DIALOG_TRANSITION_STEP_DURATION } from "../../../../constants/organisms/dialog/dialog";
+import { logErrorOrOutputToConsole } from "../../../../../common-apis/errorUtils.js";
 
-import arrowTosca from "../../../../assets/wrappedImages/arrowTosca";
-import arrowWhite from "../../../../assets/wrappedImages/arrowWhite";
+import arrowTosca from "../../../../assets/wrappedImages/arrowTosca.jsx";
+import arrowWhite from "../../../../assets/wrappedImages/arrowWhite.jsx";
 
 import s from "./dialog-step.module.scss";
-import { AssetIcon } from "../../../atoms/AssetIcon/AssetIcon";
-import { LinkButton } from "../../../atoms/buttons/LinkButton/LinkButton";
-import { BackgroundTitle } from "../../../atoms/BackgroundTitle/BackgroundTitle";
-import { DialogButtons } from "../DialogButtons/DialogButtons";
-import { LoadingDots } from "../../../atoms/LoadingDots/LoadingDots";
-import { ICON_ROTATE_OPTIONS } from "../../../../constants/atoms/LinkButton/linkButton";
+import { AssetIcon } from "../../../atoms/AssetIcon/AssetIcon.jsx";
+import { ICON_ROTATE_OPTIONS, LinkButton } from "../../../atoms/buttons/LinkButton/LinkButton.jsx";
+import { BackgroundTitle } from "../../../atoms/BackgroundTitle/BackgroundTitle.jsx";
+import { DialogButtons } from "../DialogButtons/DialogButtons.jsx";
+import { LoadingDots } from "../../../atoms/LoadingDots/LoadingDots.jsx";
+import { DIALOG_TRANSITION_STEP_DURATION } from "../Dialog.jsx";
+
+export const DIALOG_STEP_CLASS = "dialog-step";
 
 /**
  * Step component, part of the DialogWithSteps modal component. This component should be used inside the primary dialog component.
+ *
  * @component
- * @param {string} stepName - Step name, specified on the root dialog level, used as an ID for dialog navigation.
- * @param {Object} children - Content of the dialog step. Supports both raw content and components.
- * @param {string} image - Illustration/icon at the top, path to an image. The content is the path to the image.
- * @param {React.ComponentType} ImageRaw - Illustration/icon at the top, path to an image. The content is the image component to be inserted.
- * @param {string} title - Step title.
- * @param {string} titleIcon - Icon next to the step title, path to an image.
- * @param {Coin} titleIconCoin - Coin to be shown as an AssetIcon next to the step title.
- * @param {function} coinToIconPaths - Function returning icons paths by Coin
- * @param {boolean} titleLoadingDots - Show loading dots next to the title or not.
- * @param {string} subtitle - Step subtitle.
- * @param {string} backButtonText - Secondary button title.
- * @param {function} backButtonClick - Secondary button click handler.
- * @param {string} backButtonTo - Secondary button link.
- * @param {string} confirmButtonText - Primary button title.
- * @param {function} confirmButtonClick - Primary button click handler.
- * @param {string} confirmButtonLink - Primary button link.
- * @param {boolean} primaryButtonLoader - Enable loader for the primary button.
- * @param {boolean} fixedButtons - Enable fixed buttons in the bottom for mobile devices.
- * @param {boolean} showCornerBackButton - Forcefully enable or disable blue corner back button.
- * @param {string} cornerBackButtonTitle - Blue corner back button title.
- * @param {function} cornerBackButtonClick - Blue corner back button click handler.
- * @param {boolean} bigButtonMargins - Increase button margins.
- * @param {boolean} noButtonMargins - Decrease button margins.
- * @param {boolean} headerTitleLeft - Align header title to the left. Default: false.
- * @param {boolean} subtitleSmallMargin - Reduce the margin under the subtitle.
- * @param {boolean} subtitleNoMargin - Disable the margin under the subtitle.
- * @param {boolean} showBackgroundTitle - Enable the semi-transparent secondary background title.
- * @param {function} setClickTrigger - Function to setup an external trigger for the primary button.
- * @param {boolean} breakSubtitleWords - Enable word-break for subtitles. Default: false.
- * @param {string} contentAlign - Receives "left", "center", "right". Controls the step content container alignment.
- * @param {Object} controls - Dialog-to-step connection object, required for multi-step dialog windows.
- * @param {string} width - Width in pixels, formatted as "1000px" and passed a string. Values should be used from constants.
- * @param {string} height - Height in pixels, formatted as "1000px" and passed a string. Values should be used from constants.
- * @param {string} backgroundImage - Background image, path to an image.
- * @param {string} backgroundImageMobile - Background image for mobiles, path to an image.
- * @param {boolean} isSecondaryButtonBig - Changes the secondary button style from link to a secondary-button. Default: false.
+ * @param {Object} props - The props object.
+ * @param {string} props.stepName - Step name, specified on the root dialog level, used as an ID for dialog navigation.
+ * @param {React.ReactNode} props.children - Content of the dialog step. Supports both raw content and components.
+ * @param {string} props.image - Illustration/icon at the top, path to an image.
+ * @param {React.ComponentType} props.ImageRaw - Illustration/icon at the top, the image component to be inserted.
+ * @param {string} props.title - Step title.
+ * @param {string} props.titleIcon - Icon next to the step title, path to an image.
+ * @param {Coin} props.titleIconCoin - Coin to be shown as an AssetIcon next to the step title.
+ * @param {function} props.coinToIconPaths - Function returning icon paths by Coin.
+ * @param {boolean} props.titleLoadingDots - Show loading dots next to the title or not.
+ * @param {string} props.subtitle - Step subtitle.
+ * @param {string} props.backButtonText - Secondary button title.
+ * @param {function} props.backButtonClick - Secondary button click handler.
+ * @param {string} props.backButtonTo - Secondary button link.
+ * @param {string} props.confirmButtonText - Primary button title.
+ * @param {function} props.confirmButtonClick - Primary button click handler.
+ * @param {string} props.confirmButtonLink - Primary button link.
+ * @param {boolean} props.primaryButtonLoader - Enable loader for the primary button.
+ * @param {boolean} props.fixedButtons - Enable fixed buttons in the bottom for mobile devices.
+ * @param {boolean} props.showCornerBackButton - Forcefully enable or disable blue corner back button.
+ * @param {string} props.cornerBackButtonTitle - Blue corner back button title.
+ * @param {function} props.cornerBackButtonClick - Blue corner back button click handler.
+ * @param {boolean} props.bigButtonMargins - Increase button margins.
+ * @param {boolean} props.noButtonMargins - Decrease button margins.
+ * @param {boolean} props.headerTitleLeft - Align header title to the left. Default: false.
+ * @param {boolean} props.subtitleSmallMargin - Reduce the margin under the subtitle.
+ * @param {boolean} props.subtitleNoMargin - Disable the margin under the subtitle.
+ * @param {boolean} props.showBackgroundTitle - Enable the semi-transparent secondary background title.
+ * @param {function} props.setClickTrigger - Function to set up an external trigger for the primary button.
+ * @param {boolean} props.breakSubtitleWords - Enable word-break for subtitles. Default: false.
+ * @param {string} props.contentAlign - Receives "left", "center", "right". Controls the step content container alignment.
+ * @param {Object} props.controls - Dialog-to-step connection object, required for multi-step dialog windows.
+ * @param {string} props.width - Width in pixels, formatted as "1000px" and passed as a string. Values should be used from constants.
+ * @param {string} props.height - Height in pixels, formatted as "1000px" and passed as a string. Values should be used from constants.
+ * @param {string} props.backgroundImage - Background image, path to an image.
+ * @param {string} props.backgroundImageMobile - Background image for mobiles, path to an image.
+ * @param {boolean} props.isSecondaryButtonBig - Changes the secondary button style from link to a secondary-button. Default: false.
  * @returns {JSX.Element} React component
  */
 export const DialogStep = ({

package/src/{components → ui-kit/components}/organisms/Dialog/DialogStep/dialog-step.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../../styles/index";
+@import "../../../../assets/styles/index";
 
 @import "../dialog.module";
 

package/src/{components → ui-kit/components}/organisms/Dialog/dialog.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 $transitionDuration: 0.2s;