@rabbitio/ui-kit 1.0.0-beta.65 → 1.0.0-beta.68

package/src/components/atoms/QrCode/QrCode.jsx

@@ -13,8 +13,7 @@ export const QrCode = ({ address, fill = false }) => {
         (async () => {
             try {
                 if (address) {
-                    canvasRef.current.innerHTML =
-                        await generateQrAndShowInCanvas(address);
+                    canvasRef.current.innerHTML = await generateQrAndShowInCanvas(address);
                 }
             } catch (e) {
                 logErrorOrOutputToConsole(e);
@@ -22,12 +21,7 @@ export const QrCode = ({ address, fill = false }) => {
         })();
     }, [address]);
 
-    return (
-        <div
-            className={s["qr-code"] + (fill ? " " + s["fill"] : "")}
-            ref={canvasRef}
-        />
-    );
+    return <div className={s["qr-code"] + (fill ? " " + s["fill"] : "")} ref={canvasRef} />;
 };
 
 QrCode.propTypes = {

package/src/components/atoms/RateSelector/RateSelector.jsx

@@ -13,24 +13,16 @@ export const RateSelector = ({
     return (
         <div className={s["rate-selector"]}>
             <div
-                className={`${s["rate-selector-item"]} ${
-                    !isFixed ? s["selected"] : ""
-                }`}
+                className={`${s["rate-selector-item"]} ${!isFixed ? s["selected"] : ""}`}
                 onClick={() => setIsFixed(false)}
             >
-                <div className={s["rate-selector-item-text"]}>
-                    {translations.floatingRate}
-                </div>
+                <div className={s["rate-selector-item-text"]}>{translations.floatingRate}</div>
             </div>
             <div
-                className={`${s["rate-selector-item"]} ${
-                    isFixed ? s["selected"] : ""
-                }`}
+                className={`${s["rate-selector-item"]} ${isFixed ? s["selected"] : ""}`}
                 onClick={() => setIsFixed(true)}
             >
-                <div className={s["rate-selector-item-text"]}>
-                    {translations.fixedRate}
-                </div>
+                <div className={s["rate-selector-item-text"]}>{translations.fixedRate}</div>
             </div>
         </div>
     );

package/src/components/atoms/SupportChat/SupportChat.jsx

@@ -1,12 +1,7 @@
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 
-export const SupportChat = ({
-    url,
-    websiteToken,
-    welcomeMessage = "",
-    locale = "en",
-}) => {
+export const SupportChat = ({ url, websiteToken, welcomeMessage = "", locale = "en" }) => {
     useEffect(() => {
         window.chatwootSettings = {
             position: "right",

package/src/components/atoms/Textarea/Textarea.jsx

@@ -49,21 +49,14 @@ export const Textarea = forwardRef(
     ) => {
         const callHandlingErrors = useCallHandlingErrors();
 
-        const onChangeProxy = (e) => {
-            if (ignoreEnter)
-                e.target.value = e.target.value.replace(/(\r\n|\n|\r)/gm, "");
+        const onChangeProxy = e => {
+            if (ignoreEnter) e.target.value = e.target.value.replace(/(\r\n|\n|\r)/gm, "");
 
-            if (e.target?.value.indexOf("\n") === -1 || !ignoreEnter)
-                onChange(e);
+            if (e.target?.value.indexOf("\n") === -1 || !ignoreEnter) onChange(e);
         };
 
         return (
-            <div
-                className={
-                    s["textarea"] +
-                    ` ${fullHeight ? " " + s["full-height"] : ""}`
-                }
-            >
+            <div className={s["textarea"] + ` ${fullHeight ? " " + s["full-height"] : ""}`}>
                 {label ? (
                     <label htmlFor={id} className={s["textarea-input-label"]}>
                         {label}
@@ -77,13 +70,11 @@ export const Textarea = forwardRef(
                             " " +
                             s["adaptive-height"] +
                             (disabled ? " " + s["disabled"] : "") +
-                            (errorEncountered
-                                ? " " + s["error-encountered"]
-                                : "")
+                            (errorEncountered ? " " + s["error-encountered"] : "")
                         }
                         minRows={1}
                         maxRows={3}
-                        onChange={(e) => callHandlingErrors(onChangeProxy, e)}
+                        onChange={e => callHandlingErrors(onChangeProxy, e)}
                         placeholder={placeholder}
                         value={value}
                         id={id}
@@ -96,11 +87,11 @@ export const Textarea = forwardRef(
                         name={name}
                         className={
                             s["textarea-input"] +
-                            ` ${fullHeight ? s["full-height"] : ""} ${
-                                smallText ? s["small-text"] : ""
-                            } ${disabled ? s["disabled"] : ""}`
+                            ` ${fullHeight ? s["full-height"] : ""} ${smallText ? s["small-text"] : ""} ${
+                                disabled ? s["disabled"] : ""
+                            }`
                         }
-                        onChange={(e) => callHandlingErrors(onChange, e)}
+                        onChange={e => callHandlingErrors(onChange, e)}
                         placeholder={placeholder}
                         value={value}
                         id={id}
@@ -111,10 +102,7 @@ export const Textarea = forwardRef(
                 )}
 
                 {alertText || successAlertText ? (
-                    <Validation
-                        text={alertText || successAlertText}
-                        isSuccessAlert={!alertText}
-                    />
+                    <Validation text={alertText || successAlertText} isSuccessAlert={!alertText} />
                 ) : null}
             </div>
         );

package/src/components/atoms/TitleBox/TitleBox.jsx

@@ -34,7 +34,7 @@ import { Tooltip } from "../Tooltip/Tooltip.jsx";
 export const TitleBox = ({
     title = "",
     linkText = "",
-    linkButtonClick = (resetButtonLoader) => {},
+    linkButtonClick = resetButtonLoader => {},
     isLinkButtonDisabled = false,
     children,
     linkButtonLoader = false,
@@ -50,13 +50,11 @@ export const TitleBox = ({
 }) => {
     const handleError = useCallHandlingErrors();
 
-    const transparentTitleClass = transparentTitle
-        ? s["transparent-title"]
-        : "";
+    const transparentTitleClass = transparentTitle ? s["transparent-title"] : "";
 
     const [showCopyNotice, setShowCopyNotice] = useState(false);
 
-    const handleCopyButton = (e) => {
+    const handleCopyButton = e => {
         handleError(() => {
             setShowCopyNotice(true);
             copyBrowserTextToClipboard(copyButtonContent);
@@ -67,31 +65,13 @@ export const TitleBox = ({
     };
 
     return (
-        <div
-            className={`${s["title-box"]} ${fullWidth ? s["full-width"] : ""}`}
-        >
+        <div className={`${s["title-box"]} ${fullWidth ? s["full-width"] : ""}`}>
             {title || titleNoticeText || linkText ? (
                 <div className={s["title-box-wrapper"]}>
                     {bigTitle ? (
-                        <h5
-                            className={
-                                s["title-box-wrapper-title"] +
-                                " " +
-                                transparentTitleClass
-                            }
-                        >
-                            {title}
-                        </h5>
+                        <h5 className={s["title-box-wrapper-title"] + " " + transparentTitleClass}>{title}</h5>
                     ) : (
-                        <h6
-                            className={
-                                s["title-box-wrapper-title"] +
-                                " " +
-                                transparentTitleClass
-                            }
-                        >
-                            {title}
-                        </h6>
+                        <h6 className={s["title-box-wrapper-title"] + " " + transparentTitleClass}>{title}</h6>
                     )}
                     {titleNoticeText ? (
                         <NoticeIcon
@@ -108,10 +88,7 @@ export const TitleBox = ({
                                 isLoadable={false}
                                 isDisabled={false}
                             />
-                            <Tooltip
-                                position={TOOLTIP_POSITIONS.TOP_LEFT}
-                                showTooltip={showCopyNotice}
-                            >
+                            <Tooltip position={TOOLTIP_POSITIONS.TOP_LEFT} showTooltip={showCopyNotice}>
                                 {copyButtonTooltipContent}
                             </Tooltip>
                         </div>

package/src/components/atoms/TitleBox/title-box.module.scss

@@ -18,6 +18,8 @@
         &-title {
             color: SolidColor("grey");
             font-weight: $semi-bold;
+            text-align: left;
+
             &.transparent-title {
                 color: rgba($white, 0.2);
             }

package/src/components/atoms/Tooltip/Tooltip.jsx

@@ -29,7 +29,7 @@ export const Tooltip = ({
 }) => {
     const handleError = useCallHandlingErrors();
 
-    const onClick = (e) => {
+    const onClick = e => {
         e.stopPropagation();
         handleClick();
     };
@@ -37,13 +37,11 @@ export const Tooltip = ({
     return (
         <CSSTransition in={showTooltip} timeout={400} unmountOnExit>
             <span
-                className={`${s["tooltip"]} ${wide ? s["wide"] : ""} ${
-                    s[position]
-                } ${ignorePointerEvents ? s["ignore-pointer"] : ""}`}
-                onClick={(e) => handleError(onClick, e)}
-                onDoubleClick={(e) =>
-                    handleError((e) => e.stopPropagation(), e)
-                }
+                className={`${s["tooltip"]} ${wide ? s["wide"] : ""} ${s[position]} ${
+                    ignorePointerEvents ? s["ignore-pointer"] : ""
+                }`}
+                onClick={e => handleError(onClick, e)}
+                onDoubleClick={e => handleError(e => e.stopPropagation(), e)}
             >
                 <DarkRectangle />
                 {/*<img src={darkRectangle} alt="dark rectangle" />*/}

package/src/components/atoms/TwoLinesOfText/LinesOfText.jsx

@@ -34,23 +34,17 @@ export const LinesOfText = ({
         <div className={isHorizontal ? s["horizontal"] : ""}>
             <h5 className={s["first-line-text"]}>
                 <span
-                    className={`${
-                        isFirstLineTextReducible ? s["shorted"] : s["full-text"]
-                    } ${wrapFirstLine ? " " + s["wrap"] : ""} ${
-                        breakFirstLine ? " " + s["break"] : ""
-                    }`}
+                    className={`${isFirstLineTextReducible ? s["shorted"] : s["full-text"]} ${
+                        wrapFirstLine ? " " + s["wrap"] : ""
+                    } ${breakFirstLine ? " " + s["break"] : ""}`}
                 >
                     {firstLineText}
                 </span>
                 {`\u00A0${firstLineNotReducibleSuffix}`}
             </h5>
             {isHorizontal ? <div className={s["line"]} /> : null}
-            {secondLineText ? (
-                <p className={s["second-line-text"]}>{secondLineText}</p>
-            ) : null}
-            {thirdLineText ? (
-                <p className={s["second-line-text"]}>{thirdLineText}</p>
-            ) : null}
+            {secondLineText ? <p className={s["second-line-text"]}>{secondLineText}</p> : null}
+            {thirdLineText ? <p className={s["second-line-text"]}>{thirdLineText}</p> : null}
         </div>
     );
 };

package/src/components/atoms/buttons/Button/Button.jsx

@@ -46,7 +46,7 @@ export const Button = ({
     icon = "",
     content = "",
     isDisabled = false,
-    setClickTrigger = (p) => {},
+    setClickTrigger = p => {},
     isFormSubmittingButton = false,
     bigIcon = false,
     checkmarkOnClick = false,
@@ -72,7 +72,7 @@ export const Button = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isLoading]);
 
-    const buttonClick = (e) => {
+    const buttonClick = e => {
         if (isLoading || isDisabled) {
             return false;
         }
@@ -103,77 +103,47 @@ export const Button = ({
         (fullWidthOnMobiles ? ` ${styles["full-width-on-mobiles"]}` : "") +
         (fullWidthOnTablets ? ` ${styles["full-width-on-tablets"]}` : "") +
         (isDisabled ? ` ${styles.disable}` : "") +
-        (smallPaddingOnSmallMobiles
-            ? ` ${styles["small-padding-on-small-mobiles"]}`
-            : "");
+        (smallPaddingOnSmallMobiles ? ` ${styles["small-padding-on-small-mobiles"]}` : "");
 
     return (
         <>
             {isFormSubmittingButton ? <input type="submit" hidden /> : null}
             {to ? (
-                <a
-                    className={classNames}
-                    onClick={(e) => handleError(buttonClick, e)}
-                    href={to}
-                    ref={buttonRef}
-                >
+                <a className={classNames} onClick={e => handleError(buttonClick, e)} href={to} ref={buttonRef}>
                     {icon ? (
-                        <div
-                            className={
-                                styles["button-with-icon"] +
-                                (bigIcon ? ` ${styles["big-icon"]}` : "")
-                            }
-                        >
+                        <div className={styles["button-with-icon"] + (bigIcon ? ` ${styles["big-icon"]}` : "")}>
                             <img src={icon} alt="button icon" />
-                            <span className={styles["button-with-icon-text"]}>
-                                {content}
-                            </span>
+                            <span className={styles["button-with-icon-text"]}>{content}</span>
                         </div>
                     ) : (
                         content
                     )}
                 </a>
             ) : (
-                <div
-                    className={classNames}
-                    onClick={(e) => handleError(buttonClick, e)}
-                    ref={buttonRef}
-                >
+                <div className={classNames} onClick={e => handleError(buttonClick, e)} ref={buttonRef}>
                     <div
-                        className={`${styles["button-primary-dots-wrapper"]} ${
-                            isLoading && loader ? styles.show : ""
-                        }`}
+                        className={`${styles["button-primary-dots-wrapper"]} ${isLoading && loader ? styles.show : ""}`}
                     >
-                        {loader && isLoading ? (
-                            <LoadingDots isColored={mode === "white"} />
-                        ) : null}
+                        {loader && isLoading ? <LoadingDots isColored={mode === "white"} /> : null}
                     </div>
                     <div
-                        className={`${styles["button-success-icon"]} ${
-                            styles[mode]
-                        } ${isCheckShown ? styles["show"] : ""}`}
+                        className={`${styles["button-success-icon"]} ${styles[mode]} ${
+                            isCheckShown ? styles["show"] : ""
+                        }`}
                     ></div>
                     {icon ? (
                         <div
                             className={`${styles["button-with-icon"]} ${
-                                (isLoading && loader) ||
-                                (checkmarkOnClick && isCheckShown)
-                                    ? styles["hide"]
-                                    : ""
+                                (isLoading && loader) || (checkmarkOnClick && isCheckShown) ? styles["hide"] : ""
                             } ${bigIcon ? styles["big-icon"] : ""}`}
                         >
                             <img src={icon} alt="button icon" />
-                            <span className={styles["button-with-icon-text"]}>
-                                {content}
-                            </span>
+                            <span className={styles["button-with-icon-text"]}>{content}</span>
                         </div>
                     ) : (
                         <span
                             className={`${styles["button-text"]} ${
-                                (isLoading && loader) ||
-                                (checkmarkOnClick && isCheckShown)
-                                    ? styles["hide"]
-                                    : ""
+                                (isLoading && loader) || (checkmarkOnClick && isCheckShown) ? styles["hide"] : ""
                             }`}
                         >
                             {content}
@@ -229,11 +199,11 @@ Button.defaultProps = {
     icon: "",
     content: "",
     isDisabled: false,
-    setClickTrigger: (p) => {},
+    setClickTrigger: p => {},
     isFormSubmittingButton: false,
     bigIcon: false,
     checkmarkOnClick: false,
     propagatePrimaryButtonClick: true,
     smallPaddingOnSmallMobiles: false,
-    handleError: (func) => func(),
+    handleError: func => func(),
 };

package/src/components/atoms/buttons/Close/Close.jsx

@@ -17,19 +17,13 @@ import { CLOSE_COLORS } from "../../../../constants/atoms/Close/close";
  * @param {Function} props.onClick - The function to call when the icon is clicked.
  * @param {boolean} props.large - Whether the icon should be displayed in a larger size.
  */
-export const Close = ({
-    color = CLOSE_COLORS.WHITE,
-    onClick = () => {},
-    large = false,
-}) => {
+export const Close = ({ color = CLOSE_COLORS.WHITE, onClick = () => {}, large = false }) => {
     const callHandlingErrors = useCallHandlingErrors();
 
     return (
         <svg
-            className={
-                s["close"] + " " + s[color] + (large ? " " + s["large"] : "")
-            }
-            onClick={(e) => callHandlingErrors(onClick, e)}
+            className={s["close"] + " " + s[color] + (large ? " " + s["large"] : "")}
+            onClick={e => callHandlingErrors(onClick, e)}
             style={{ cursor: "pointer" }}
             xmlns="http://www.w3.org/2000/svg"
             viewBox={`0 0 50 50`}

package/src/components/atoms/buttons/LinkButton/LinkButton.jsx

@@ -25,7 +25,7 @@ import { LoadingDots } from "../../LoadingDots/LoadingDots";
  * @returns {JSX.Element} A React component that renders a clickable and optionally loadable and icon-displaying button.
  */
 export const LinkButton = ({
-    onClick = (resetButtonLoader) => {},
+    onClick = resetButtonLoader => {},
     isDisabled = false,
     isLoadable = false,
     content = "",
@@ -52,12 +52,7 @@ export const LinkButton = ({
     };
 
     useEffect(() => {
-        if (
-            iconRotate &&
-            Object.keys(ICON_ROTATE_OPTIONS).find(
-                (key) => ICON_ROTATE_OPTIONS[key] === iconRotate
-            )
-        )
+        if (iconRotate && Object.keys(ICON_ROTATE_OPTIONS).find(key => ICON_ROTATE_OPTIONS[key] === iconRotate))
             setProcessedIconRotation(iconRotate);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [iconRotate]);
@@ -69,8 +64,7 @@ export const LinkButton = ({
             className={
                 s["link-button"] +
                 ` ${
-                    processedIconRotation &&
-                    processedIconRotation !== ICON_ROTATE_OPTIONS.rotate0
+                    processedIconRotation && processedIconRotation !== ICON_ROTATE_OPTIONS.rotate0
                         ? " " + s["icon-rotate-" + processedIconRotation]
                         : ""
                 } ${isDisabled ? " " + s["disabled"] : ""}`
@@ -81,10 +75,7 @@ export const LinkButton = ({
             {IconComponent ? <IconComponent /> : null}
             <p
                 className={
-                    s["link-button-text"] +
-                    ` ${isColored ? s["colored"] : ""} ${
-                        isDisabled ? s["disabled"] : ""
-                    }`
+                    s["link-button-text"] + ` ${isColored ? s["colored"] : ""} ${isDisabled ? s["disabled"] : ""}`
                 }
             >
                 {content}
@@ -105,7 +96,7 @@ LinkButton.propTypes = {
 };
 
 LinkButton.defaultProps = {
-    onClick: (resetButtonLoader) => {},
+    onClick: resetButtonLoader => {},
     isDisabled: false,
     isLoadable: false,
     content: "",

package/src/components/atoms/buttons/RadioButtonWithText/RadioButtonWithText.jsx

@@ -42,9 +42,7 @@ export const RadioButtonWithText = ({
 
     const onMouseEnter = () => {
         if (tooltipText) {
-            setShowTooltipTimeoutId(
-                setTimeout(() => setShowTooltip(true), 700)
-            );
+            setShowTooltipTimeoutId(setTimeout(() => setShowTooltip(true), 700));
         }
     };
 
@@ -66,44 +64,28 @@ export const RadioButtonWithText = ({
                     isLoading ? s["hide"] : "",
                     isDisabled ? s["disabled"] : "",
                 ].join(" ")}
-                onMouseEnter={(e) => handleError(onMouseEnter, e)}
-                onMouseLeave={(e) => handleError(onMouseLeave, e)}
+                onMouseEnter={e => handleError(onMouseEnter, e)}
+                onMouseLeave={e => handleError(onMouseLeave, e)}
             >
                 {tooltipText && showTooltip ? (
                     <div>
                         {/*TODO: [bug, critical] click is still propagated*/}
-                        <Tooltip
-                            showTooltip={showTooltip}
-                            handleClick={() => setShowTooltip(false)}
-                        >
+                        <Tooltip showTooltip={showTooltip} handleClick={() => setShowTooltip(false)}>
                             {tooltipText}
                         </Tooltip>
                     </div>
                 ) : null}
-                <div
-                    className={
-                        s["radio-button-with-text-dots"] +
-                        (isLoading ? s["show"] : "")
-                    }
-                >
+                <div className={s["radio-button-with-text-dots"] + (isLoading ? s["show"] : "")}>
                     <LoadingDots />
                 </div>
-                <div
-                    className={
-                        s["radio-button-with-text-content"] +
-                        " " +
-                        (false ? s["hide"] : "")
-                    }
-                >
+                <div className={s["radio-button-with-text-content"] + " " + (false ? s["hide"] : "")}>
                     <input
                         id={"radio-button-with-text-" + id}
                         type="checkbox"
                         value={isSwitchedOn}
                         onChange={handleChange}
                     />
-                    <span className={s["radio-button-with-text-wrapper"]}>
-                        {text}
-                    </span>
+                    <span className={s["radio-button-with-text-wrapper"]}>{text}</span>
                 </div>
             </label>
         </div>

package/src/components/hooks/useCallHandlingErrors.js

@@ -9,11 +9,7 @@ export function useCallHandlingErrors() {
             try {
                 await functionToBeCalled(event);
             } catch (error) {
-                Logger.logError(
-                    error,
-                    functionToBeCalled?.name || "errorBoundaryTrigger",
-                    "Caught by ErrorBoundary"
-                );
+                Logger.logError(error, functionToBeCalled?.name || "errorBoundaryTrigger", "Caught by ErrorBoundary");
                 // Triggering ErrorBoundary
                 setState(() => {
                     throw error;

package/src/components/hooks/useReferredState.js

@@ -11,7 +11,7 @@ export function useReferredState(initialValue) {
     const [state, setState] = React.useState(initialValue);
     const reference = React.useRef(state);
 
-    const setReferredState = (value) => {
+    const setReferredState = value => {
         if (value && {}.toString.call(value) === "[object Function]") {
             value = value(reference.current);
         }