@rabbitio/ui-kit 1.0.0-beta.6 → 1.0.0-beta.61

package/src/components/atoms/Input/Input.jsx

@@ -0,0 +1,198 @@
+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/errorUtils.js";
+
+import { Close } from "../buttons/Close/Close.jsx";
+import { Validation } from "../Validation/Validation.jsx";
+
+/**
+ * Input component for forms.
+ *
+ * @component
+ * @param {string} [type="text"] - The type of input (e.g., "text", "number", "email").
+ * @param {string} [name=""] - The name of the input field.
+ * @param {function} [onChange=() => {}] - Function called when the input value changes.
+ * @param {string} [alertText=""] - Text for alert messages.
+ * @param {string} [placeholder=""] - Placeholder text for the input.
+ * @param {string} [className=""] - Additional CSS classes for styling.
+ * @param {string} [defaultValue=""] - Default value for the input.
+ * @param {boolean} [isBigHeight=false] - Whether the input has a larger height.
+ * @param {boolean} [isSmallHeight=false] - Whether the input has a smaller height.
+ * @param {string} [label=""] - Label text for the input.
+ * @param {string} [id=null] - Unique ID for the input.
+ * @param {string} [value=""] - Value of the input.
+ * @param {string} [successAlertText=""] - Text for success alert messages.
+ * @param {boolean} [disabled=false] - Whether the input is disabled.
+ * @param {function} [onKeyUp=() => {}] - Function called on key up event.
+ * @param {boolean} [autoFocus=false] - Whether the input should be autofocused.
+ * @param {boolean} [fillWidth=false] - Whether the input should fill the width of its container.
+ * @param {boolean} [clearButton=false] - Whether to show a clear button for the input.
+ * @param {boolean} [imageBackground=false] - Whether the input has an image background.
+ * @param {boolean} [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/components/atoms/Input/input.module.scss

@@ -0,0 +1,107 @@
+@import "../../../../styles/index";
+
+.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/components}/atoms/LoadingDots/LoadingDots.module.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/index";
+@import "../../../../styles/index";
 
 .loading-dots {
     display: flex;

package/src/components/atoms/NoticeIcon/NoticeIcon.jsx

@@ -0,0 +1,71 @@
+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 } from "../Tooltip/Tooltip.jsx";
+import NoticeQuestionIcon from "../../../assets/wrappedImages/noticeQuestionIcon.jsx";
+
+import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
+
+/**
+ * A component that displays a notice icon with optional tooltip.
+ *
+ * @component
+ * @param {string} noticeText - The text to display inside the tooltip.
+ * @param {string} [titleNoticeIcon] - The source URL for the icon displayed on the notice.
+ * @param {string} 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"]}
+                />
+            ) : (
+                <div className={s["notice-icon-image"]}>
+                    <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/components/atoms/NoticeIcon/notice-icon.module.scss

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

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

@@ -0,0 +1,34 @@
+import React, { useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+
+import { logErrorOrOutputToConsole } from "../../../common/errorUtils";
+import { generateQrAndShowInCanvas } from "../../../common/adapters/qrUtils";
+
+import s from "./qr-code.module.scss";
+
+export const QrCode = ({ address }) => {
+    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"]} ref={canvasRef} />;
+};
+
+QrCode.propTypes = {
+    address: PropTypes.string.isRequired,
+};
+
+QrCode.defaultProps = {
+    address: "",
+};

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

@@ -0,0 +1,9 @@
+@import "../../../../styles/index";
+
+.qr-code {
+    width: 180px !important;
+    height: 180px !important;
+    @media (max-width: $tablet-width) {
+        margin: 0 auto;
+    }
+}

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

@@ -0,0 +1,37 @@
+import React from "react";
+
+import s from "./rate-selector.module.scss";
+
+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/components/atoms/RateSelector/rate-selector.module.scss

@@ -0,0 +1,47 @@
+@import "../../../../styles/index";
+
+.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/src/components/atoms/SupportChat/SupportChat.jsx

@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+
+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;
+            var g = d.createElement(t),
+                s = d.getElementsByTagName(t)[0];
+            g.src = BASE_URL + "/packs/js/sdk.js";
+            g.defer = true;
+            g.async = true;
+            s.parentNode.insertBefore(g, s);
+            g.onload = function () {
+                window.chatwootSDK.run({
+                    websiteToken: websiteToken,
+                    baseUrl: BASE_URL,
+                });
+            };
+        })(document, "script");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return null;
+};
+
+SupportChat.propTypes = {
+    url: PropTypes.string.isRequired,
+    websiteToken: PropTypes.string.isRequired,
+    welcomeMessage: PropTypes.string,
+    locale: PropTypes.string,
+};
+
+SupportChat.defaultProps = {
+    welcomeMessage: "",
+    locale: "en",
+};