@rabbitio/ui-kit 1.0.0-beta.8 → 1.0.0-beta.80

package/src/ui-kit/components/atoms/Input/Input.jsx

@@ -0,0 +1,183 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+import s from "./input.module.scss";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
+
+import { Close } from "../buttons/Close/Close.jsx";
+import { Validation } from "../Validation/Validation.jsx";
+
+/**
+ * Input component for forms.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} [props.type="text"] - The type of input (e.g., "text", "number", "email").
+ * @param {string} [props.name=""] - The name of the input field.
+ * @param {function} [props.onChange=() => {}] - Function called when the input value changes.
+ * @param {string} [props.alertText=""] - Text for alert messages.
+ * @param {string} [props.placeholder=""] - Placeholder text for the input.
+ * @param {string} [props.className=""] - Additional CSS classes for styling.
+ * @param {string} [props.defaultValue=""] - Default value for the input.
+ * @param {boolean} [props.isBigHeight=false] - Whether the input has a larger height.
+ * @param {boolean} [props.isSmallHeight=false] - Whether the input has a smaller height.
+ * @param {string} [props.label=""] - Label text for the input.
+ * @param {string} [props.id=null] - Unique ID for the input.
+ * @param {string} [props.value=""] - Value of the input.
+ * @param {string} [props.successAlertText=""] - Text for success alert messages.
+ * @param {boolean} [props.disabled=false] - Whether the input is disabled.
+ * @param {function} [props.onKeyUp=() => {}] - Function called on key up event.
+ * @param {boolean} [props.autoFocus=false] - Whether the input should be autofocused.
+ * @param {boolean} [props.fillWidth=false] - Whether the input should fill the width of its container.
+ * @param {boolean} [props.clearButton=false] - Whether to show a clear button for the input.
+ * @param {boolean} [props.imageBackground=false] - Whether the input has an image background.
+ * @param {boolean} [props.errorEncountered=false] - Whether an error has been encountered for the input.
+ */
+export const Input = forwardRef(
+    (
+        {
+            type = "text",
+            name = "",
+            onChange = () => {},
+            alertText = "",
+            placeholder = "",
+            className = "",
+            defaultValue = "",
+            isBigHeight = false,
+            isSmallHeight = false,
+            label = "",
+            id = null,
+            value = "",
+            successAlertText = "",
+            disabled = false,
+            onKeyUp = event => {},
+            autoFocus = false,
+            fillWidth = false,
+            clearButton = false,
+            imageBackground = false,
+            errorEncountered = false,
+        },
+        ref
+    ) => {
+        const handleError = useCallHandlingErrors();
+
+        const handleClearButtonClick = () => {
+            onChange({ target: { value: "" } });
+            try {
+                ref.current.focus();
+            } catch (e) {
+                logErrorOrOutputToConsole(
+                    "Input clear button will not work unless you provide a ref to the Input. Please pass a 'ref' parameter to the Input or disable the clear button."
+                );
+            }
+        };
+
+        return (
+            <div
+                className={[
+                    s["input"],
+                    isBigHeight ? s["big-height"] : "",
+                    isSmallHeight ? s["small-height"] : "",
+                    disabled ? s["disabled"] : "",
+                    fillWidth ? s["fill-width"] : "",
+                    imageBackground ? s["image-background"] : "",
+                ].join(" ")}
+            >
+                {label ? (
+                    <label htmlFor={id} className={s["input-label"]}>
+                        {label}
+                    </label>
+                ) : null}
+
+                {clearButton ? (
+                    <div className={s["input-clear-button"]}>
+                        <Close onClick={handleClearButtonClick} color={"dark-invert"} />
+                    </div>
+                ) : (
+                    ""
+                )}
+
+                {defaultValue ? (
+                    <input
+                        id={id}
+                        type={type}
+                        name={name}
+                        onChange={e => handleError(onChange, e)}
+                        placeholder={placeholder}
+                        className={className + (errorEncountered ? " " + s["error-encountered"] : "")}
+                        defaultValue={defaultValue}
+                        disabled={disabled}
+                        onKeyUp={event => onKeyUp(event)}
+                        autoFocus={autoFocus}
+                        ref={ref}
+                    />
+                ) : (
+                    <input
+                        id={id}
+                        type={type}
+                        name={name}
+                        onChange={e => handleError(onChange, e)}
+                        placeholder={placeholder}
+                        className={className + (errorEncountered ? " " + s["error-encountered"] : "")}
+                        value={value}
+                        disabled={disabled}
+                        onKeyUp={event => onKeyUp(event)}
+                        autoFocus={autoFocus}
+                        ref={ref}
+                    />
+                )}
+
+                {alertText || successAlertText ? (
+                    <Validation text={alertText || successAlertText} isSuccessAlert={!alertText} />
+                ) : null}
+            </div>
+        );
+    }
+);
+
+Input.propTypes = {
+    type: PropTypes.string,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    alertText: PropTypes.string,
+    placeholder: PropTypes.string,
+    className: PropTypes.string,
+    defaultValue: PropTypes.string,
+    isBigHeight: PropTypes.bool,
+    isSmallHeight: PropTypes.bool,
+    label: PropTypes.string,
+    id: PropTypes.string,
+    value: PropTypes.string,
+    successAlertText: PropTypes.string,
+    disabled: PropTypes.bool,
+    onKeyUp: PropTypes.func,
+    autoFocus: PropTypes.bool,
+    fillWidth: PropTypes.bool,
+    clearButton: PropTypes.bool,
+    imageBackground: PropTypes.bool,
+    errorEncountered: PropTypes.bool,
+};
+
+Input.defaultProps = {
+    type: "text",
+    onChange: () => {},
+    alertText: "",
+    placeholder: "",
+    className: "",
+    defaultValue: "",
+    isBigHeight: false,
+    isSmallHeight: false,
+    label: "",
+    id: null,
+    value: "",
+    successAlertText: "",
+    disabled: false,
+    onKeyUp: () => {},
+    autoFocus: false,
+    fillWidth: false,
+    clearButton: false,
+    imageBackground: false,
+    errorEncountered: false,
+};

package/src/ui-kit/components/atoms/Input/input.module.scss

@@ -0,0 +1,107 @@
+@use "../../../assets/styles/index" as *;
+
+.input {
+    position: relative;
+
+    &.big-height {
+        input {
+            min-height: 117px;
+        }
+    }
+
+    &.small-height {
+        input {
+            min-height: 48px;
+            padding: Padding("2") Padding("5");
+        }
+    }
+
+    &.disabled > input {
+        opacity: 0.5;
+    }
+
+    &.fill-width {
+        width: 100%;
+    }
+
+    input {
+        @extend %text-medium;
+        padding: Padding("5");
+        border-radius: 7px;
+        background: SolidColor(lightsmoke);
+        border: 0;
+        color: SolidColor("grey");
+        width: 100%;
+        min-height: 66px;
+        font-size: 16px;
+        vertical-align: center;
+        appearance: none;
+        transition: 0.2s all ease;
+        box-shadow: $shadowOutlineStatic;
+
+        &.error-encountered {
+            box-shadow: $shadowOutlineError !important;
+        }
+
+        &::placeholder {
+            color: SolidColor("grey");
+            font-size: 16px;
+            vertical-align: center;
+            @extend %text-medium;
+        }
+    }
+
+    @media (hover: hover) {
+        &-clear-button:hover:not(:active) + input,
+        input:hover {
+            &:not(:focus) {
+                box-shadow: $shadowOutlineHover;
+                transition: 0.02s all ease;
+            }
+        }
+    }
+
+    &-clear-button:active + input,
+    input:focus {
+        box-shadow: $shadowOutlineActive;
+    }
+
+    &.image-background {
+        input {
+            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0);
+        }
+
+        @media (hover: hover) {
+            &-clear-button:hover:not(:active) + input,
+            input:hover {
+                &:not(:focus) {
+                    background-color: $white;
+                    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0);
+                    transition: 0.02s all ease;
+                }
+            }
+        }
+
+        input:focus {
+            background-color: $white;
+            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
+        }
+    }
+
+    &-clear-button {
+        position: absolute;
+        right: 20px;
+        top: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    &-label {
+        @include typograpy(h6);
+        font-weight: $semi-bold;
+        color: SolidColor("grey");
+        margin-bottom: Margin("2");
+        display: block;
+    }
+}

package/{stories → src/ui-kit/components}/atoms/LoadingDots/LoadingDots.jsx

@@ -15,33 +15,16 @@ import styles from "./LoadingDots.module.scss";
  * @param {(boolean|'left'|'right')} [props.align=false] - Aligns the loading dots to the left or right if specified, otherwise centered.
  * @returns {React.ReactElement} A React component that renders the loading dots animation.
  */
-export const LoadingDots = ({
-    size = "small",
-    isColored = false,
-    noMargins = false,
-    align = false,
-}) => {
+export const LoadingDots = ({ size = "small", isColored = false, noMargins = false, align = false }) => {
     return (
         <div
-            className={`${styles["loading-dots"]} ${styles[size]} ${
-                noMargins ? ` ${styles["no-margins"]}` : ""
-            } ${align ? styles["align-" + align] : ""}`}
+            className={`${styles["loading-dots"]} ${styles[size]} ${noMargins ? ` ${styles["no-margins"]}` : ""} ${
+                align ? styles["align-" + align] : ""
+            }`}
         >
-            <div
-                className={`${styles.dot} ${
-                    isColored ? ` ${styles.colored}` : ""
-                }`}
-            />
-            <div
-                className={`${styles.dot} ${
-                    isColored ? ` ${styles.colored}` : ""
-                }`}
-            />
-            <div
-                className={`${styles.dot} ${
-                    isColored ? ` ${styles.colored}` : ""
-                }`}
-            />
+            <div className={`${styles.dot} ${isColored ? ` ${styles.colored}` : ""}`} />
+            <div className={`${styles.dot} ${isColored ? ` ${styles.colored}` : ""}`} />
+            <div className={`${styles.dot} ${isColored ? ` ${styles.colored}` : ""}`} />
         </div>
     );
 };
@@ -50,8 +33,5 @@ LoadingDots.propTypes = {
     size: PropTypes.oneOf(["big", "small", "extra-small"]),
     isColored: PropTypes.bool,
     noMargins: PropTypes.bool,
-    align: PropTypes.oneOfType([
-        PropTypes.oneOf(["left", "right"]),
-        PropTypes.bool,
-    ]),
+    align: PropTypes.oneOfType([PropTypes.oneOf(["left", "right"]), PropTypes.bool]),
 };

package/{stories → src/ui-kit/components}/atoms/LoadingDots/LoadingDots.module.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/index";
+@use "../../../assets/styles/index" as *;
 
 .loading-dots {
     display: flex;
@@ -40,7 +40,8 @@
             }
 
             &:nth-child(2) {
-                @extend .mx-3;
+                margin-right: Margin("3");
+                margin-left: Margin("3");
             }
         }
     }

package/src/ui-kit/components/atoms/NoticeIcon/NoticeIcon.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+
+import s from "./notice-icon.module.scss";
+
+import { handleClickOutside } from "../../../utils/uiUtils.js";
+import { Tooltip, TOOLTIP_POSITIONS } from "../Tooltip/Tooltip.jsx";
+import NoticeQuestionIcon from "../../../assets/wrappedImages/noticeQuestionIcon.jsx";
+
+/**
+ * A component that displays a notice icon with optional tooltip.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.noticeText - The text to display inside the tooltip.
+ * @param {string} [props.titleNoticeIcon] - The source URL for the icon displayed on the notice.
+ * @param {string} props.tooltipPosition - Position for the tooltip relative to the icon.
+ */
+export const NoticeIcon = ({ noticeText, titleNoticeIcon = "", tooltipPosition = TOOLTIP_POSITIONS.TOP }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+
+    const noticeRef = useRef();
+
+    useEffect(() => handleClickOutside([noticeRef], () => setShowTooltip(false)), []);
+
+    return (
+        <div ref={noticeRef} className={s["notice-icon"]}>
+            {titleNoticeIcon ? (
+                <img
+                    src={titleNoticeIcon}
+                    alt="title icon"
+                    onClick={() => setShowTooltip(prev => !prev)}
+                    className={s["notice-icon-image"]}
+                    loading="lazy"
+                />
+            ) : (
+                <div className={s["notice-icon-image"]} onClick={() => setShowTooltip(prev => !prev)}>
+                    <NoticeQuestionIcon />
+                </div>
+            )}
+            <div className={s["notice-icon-tooltip"]}>
+                <Tooltip
+                    showTooltip={showTooltip}
+                    handleClick={() => setShowTooltip(false)}
+                    wide={true}
+                    position={tooltipPosition}
+                >
+                    {noticeText}
+                </Tooltip>
+            </div>
+        </div>
+    );
+};
+
+NoticeIcon.propTypes = {
+    noticeText: PropTypes.string.isRequired,
+    titleNoticeIcon: PropTypes.string,
+    tooltipPosition: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+};
+
+NoticeIcon.defaultProps = {
+    titleNoticeIcon: "",
+    tooltipPosition: TOOLTIP_POSITIONS.TOP,
+};

package/src/ui-kit/components/atoms/NoticeIcon/notice-icon.module.scss

@@ -0,0 +1,14 @@
+@use "../../../assets/styles/index" as *;
+
+.notice-icon {
+    position: relative;
+    display: flex;
+
+    &-image {
+        @extend %hover-state;
+    }
+
+    &-tooltip {
+        left: 50%;
+    }
+}

package/src/ui-kit/components/atoms/QrCode/QrCode.jsx

@@ -0,0 +1,50 @@
+import React, { useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
+import { generateQrAndShowInCanvas } from "../../../../common-apis/adapters/qrUtils.js";
+
+import s from "./qr-code.module.scss";
+
+/**
+ * QrCode component renders a QR code for a provided crypto address.
+ *
+ * @component
+ * @example
+ * const address = "0x123456789abcdef";
+ * const fill = true;
+ * return <QrCode address={address} fill={fill} />;
+ *
+ * @param {Object} props - The props for the component.
+ * @param {string} props.address - The crypto address to generate the QR code for.
+ * @param {boolean} [props.fill=false] - If true, applies additional CSS class to fill the container.
+ *
+ * @returns {JSX.Element} A div containing the generated QR code.
+ */
+export const QrCode = ({ address, fill = false }) => {
+    const canvasRef = useRef();
+
+    useEffect(() => {
+        (async () => {
+            try {
+                if (address) {
+                    canvasRef.current.innerHTML = await generateQrAndShowInCanvas(address);
+                }
+            } catch (e) {
+                logErrorOrOutputToConsole(e);
+            }
+        })();
+    }, [address]);
+
+    return <div className={s["qr-code"] + (fill ? " " + s["fill"] : "")} ref={canvasRef} />;
+};
+
+QrCode.propTypes = {
+    address: PropTypes.string.isRequired,
+    fill: PropTypes.bool,
+};
+
+QrCode.defaultProps = {
+    address: "",
+    fill: false,
+};

package/src/ui-kit/components/atoms/QrCode/qr-code.module.scss

@@ -0,0 +1,15 @@
+@use "../../../assets/styles/index" as *;
+
+.qr-code {
+    width: 180px !important;
+    height: 180px !important;
+    @media (max-width: $tablet-width) {
+        margin: 0 auto;
+    }
+
+    &.fill {
+        position: absolute;
+        width: 100% !important;
+        height: 100% !important;
+    }
+}

package/src/ui-kit/components/atoms/RateSelector/RateSelector.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import s from "./rate-selector.module.scss";
+
+// TODO: [dev] add JSDoc
+export const RateSelector = ({
+    isFixed = false,
+    setIsFixed = () => {},
+    translations = {
+        floatingRate: "Floating rate",
+        fixedRate: "Fixed rate",
+    },
+}) => {
+    return (
+        <div className={s["rate-selector"]}>
+            <div
+                className={`${s["rate-selector-item"]} ${!isFixed ? s["selected"] : ""}`}
+                onClick={() => setIsFixed(false)}
+            >
+                <div className={s["rate-selector-item-text"]}>{translations.floatingRate}</div>
+            </div>
+            <div
+                className={`${s["rate-selector-item"]} ${isFixed ? s["selected"] : ""}`}
+                onClick={() => setIsFixed(true)}
+            >
+                <div className={s["rate-selector-item-text"]}>{translations.fixedRate}</div>
+            </div>
+        </div>
+    );
+};

package/src/ui-kit/components/atoms/RateSelector/rate-selector.module.scss

@@ -0,0 +1,47 @@
+@use "../../../assets/styles/index" as *;
+
+.rate-selector {
+    background-color: SolidColor("lightsmoke");
+    border-radius: 8px;
+    padding: 4px;
+    display: flex;
+    flex-direction: row;
+    gap: Margin("1");
+    user-select: none;
+    width: 100%;
+
+    &-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: Padding("3") Padding("3");
+        flex: 1 1;
+        border-radius: 4px;
+        gap: Margin("1");
+        cursor: pointer;
+        transition: 0.2s all $transitionEaseOut;
+        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
+
+        @media (hover: hover) {
+            &:not(.selected):hover {
+                box-shadow: 0px 0px 0px 1px SolidColor("smoke");
+            }
+        }
+
+        &:not(.selected):active {
+            box-shadow: 0px 0px 0px 1px SolidColor("smoke");
+        }
+
+        &.selected {
+            background: $white;
+            color: SolidColor("tosca");
+        }
+
+        &-text {
+            font-weight: $semi-bold;
+            text-align: center;
+            font-size: 16px;
+        }
+    }
+}

package/{stories → src/ui-kit/components}/atoms/SupportChat/SupportChat.jsx

@@ -1,12 +1,14 @@
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 
-export const SupportChat = ({ url, websiteToken, welcomeMessage = "" }) => {
+// TODO: [dev] add JSDoc
+export const SupportChat = ({ url, websiteToken, welcomeMessage = "", locale = "en" }) => {
     useEffect(() => {
         window.chatwootSettings = {
             position: "right",
             type: "standard",
             launcherTitle: welcomeMessage,
+            locale: locale,
         };
         (function (d, t) {
             var BASE_URL = url;
@@ -33,8 +35,10 @@ SupportChat.propTypes = {
     url: PropTypes.string.isRequired,
     websiteToken: PropTypes.string.isRequired,
     welcomeMessage: PropTypes.string,
+    locale: PropTypes.string,
 };
 
 SupportChat.defaultProps = {
     welcomeMessage: "",
+    locale: "en",
 };