@rabbitio/ui-kit 1.0.0-beta.48 → 1.0.0-beta.49

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.48",
+    "version": "1.0.0-beta.49",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -48,9 +48,11 @@
         "clipboard-copy": "4.0.1",
         "eventbusjs": "0.2.0",
         "jshashes": "1.0.8",
+        "qrcode": "1.4.4",
         "react": ">=18.2.0",
         "react-animate-height": "3.2.3",
         "react-dom": ">=18.2.0",
+        "react-textarea-autosize": "^8.5.3",
         "react-transition-group": "4.4.5",
         "resize-observer-polyfill": "1.5.1",
         "uuid": "9.0.0"

package/src/common/adapters/qrUtils.js

@@ -0,0 +1,18 @@
+import QRCode from "qrcode";
+
+import { improveAndRethrow } from "../errorUtils";
+
+/**
+ * Generates QR as svg xml string.
+ * Note that you should care about the element size by your self - the generated QR will just fill all available space
+ *
+ * @param encodingString {string} to be encoded as QR-code image
+ * @return {Promise<string>} xml string of generated svg image
+ */
+export async function generateQrAndShowInCanvas(encodingString) {
+    try {
+        return await QRCode.toString(encodingString, { type: "svg" });
+    } catch (e) {
+        improveAndRethrow(e, "generateQrAndShowInCanvas");
+    }
+}

package/src/components/atoms/BackgroundTitle/background-title.module.scss

@@ -5,7 +5,7 @@
     user-select: none;
     position: relative;
     width: 200%;
-    font-family: NunitoSans;
+    // font-family: NunitoSans;
 
     &-wrapper {
         position: absolute;

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/Textarea/Textarea.jsx

@@ -0,0 +1,158 @@
+import React, { forwardRef } from "react";
+import TextareaAutosize from "react-textarea-autosize";
+import PropTypes from "prop-types";
+
+import s from "./textarea.module.scss";
+
+import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors";
+import { Validation } from "../Validation/Validation";
+
+/**
+ * A textarea component with optional adaptive height and validation messaging.
+ *
+ * @param {string} name - The name of the textarea.
+ * @param {function} onChange - Handler for change events.
+ * @param {string} placeholder - Placeholder text for the textarea.
+ * @param {string} alertText - Text for the alert message.
+ * @param {string} successAlertText - Text for the success alert message.
+ * @param {string} value - Value of the textarea.
+ * @param {string} label - Label text for the textarea.
+ * @param {string|null} id - ID for the textarea element.
+ * @param {boolean} autoFocus - If the textarea should be auto-focused.
+ * @param {boolean} fullHeight - If the textarea should be full height.
+ * @param {boolean} smallText - If the textarea should use small text styling.
+ * @param {boolean} adaptiveHeight - If the textarea should adjust its height based on content.
+ * @param {boolean} disabled - If the textarea is disabled.
+ * @param {boolean} errorEncountered - If there is an error related to the textarea.
+ * @param {boolean} ignoreEnter - If Enter key presses should be ignored.
+ */
+export const Textarea = forwardRef(
+    (
+        {
+            name = "",
+            onChange = () => {},
+            placeholder = "",
+            alertText = "",
+            successAlertText = "",
+            value = "",
+            label = "",
+            id = null,
+            autoFocus = false,
+            fullHeight = false,
+            smallText = false,
+            adaptiveHeight = false,
+            disabled = false,
+            errorEncountered = false,
+            ignoreEnter = false,
+        },
+        ref
+    ) => {
+        const callHandlingErrors = useCallHandlingErrors();
+
+        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);
+        };
+
+        return (
+            <div
+                className={
+                    s["textarea"] +
+                    ` ${fullHeight ? " " + s["full-height"] : ""}`
+                }
+            >
+                {label ? (
+                    <label htmlFor={id} className={s["input-label"]}>
+                        {label}
+                    </label>
+                ) : null}
+
+                {adaptiveHeight ? (
+                    <TextareaAutosize
+                        className={
+                            s["textarea-input"] +
+                            " " +
+                            s["adaptive-height"] +
+                            (disabled ? " " + s["disabled"] : "") +
+                            (errorEncountered
+                                ? " " + s["error-encountered"]
+                                : "")
+                        }
+                        minRows={1}
+                        maxRows={3}
+                        onChange={(e) => callHandlingErrors(onChangeProxy, e)}
+                        placeholder={placeholder}
+                        value={value}
+                        id={id}
+                        autoFocus={autoFocus}
+                        ref={ref}
+                        disabled={disabled}
+                    />
+                ) : (
+                    <textarea
+                        name={name}
+                        className={
+                            s["textarea-input"] +
+                            ` ${fullHeight ? s["full-height"] : ""} ${
+                                smallText ? s["small-text"] : ""
+                            } ${disabled ? s["disabled"] : ""}`
+                        }
+                        onChange={(e) => callHandlingErrors(onChange, e)}
+                        placeholder={placeholder}
+                        value={value}
+                        id={id}
+                        autoFocus={autoFocus}
+                        ref={ref}
+                        disabled={disabled}
+                    />
+                )}
+
+                {alertText || successAlertText ? (
+                    <Validation
+                        text={alertText || successAlertText}
+                        isSuccessAlert={!alertText}
+                    />
+                ) : null}
+            </div>
+        );
+    }
+);
+
+Textarea.propTypes = {
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.string,
+    alertText: PropTypes.string,
+    successAlertText: PropTypes.string,
+    value: PropTypes.string,
+    label: PropTypes.string,
+    id: PropTypes.string,
+    autoFocus: PropTypes.bool,
+    fullHeight: PropTypes.bool,
+    smallText: PropTypes.bool,
+    adaptiveHeight: PropTypes.bool,
+    disabled: PropTypes.bool,
+    errorEncountered: PropTypes.bool,
+    ignoreEnter: PropTypes.bool,
+};
+
+Textarea.defaultProps = {
+    name: "",
+    onChange: () => {},
+    placeholder: "",
+    alertText: "",
+    successAlertText: "",
+    value: "",
+    label: "",
+    id: null,
+    autoFocus: false,
+    fullHeight: false,
+    smallText: false,
+    adaptiveHeight: false,
+    disabled: false,
+    errorEncountered: false,
+    ignoreEnter: false,
+};

package/src/components/atoms/Textarea/textarea.module.scss

@@ -0,0 +1,63 @@
+@import "../../../../styles/index";
+
+.textarea {
+    display: flex;
+    flex-direction: column;
+
+    &.full-height {
+        height: 100%;
+    }
+
+    &-input {
+        @extend %text-medium;
+        padding: Padding("5");
+        border-radius: 7px;
+        background: SolidColor("lightsmoke");
+        border: none;
+        width: 100%;
+        resize: none;
+        min-height: 117px;
+        font-size: 16px;
+        color: SolidColor("grey");
+        appearance: none;
+        transition: 0.2s box-shadow $transitionEaseOut;
+        box-shadow: $shadowOutlineStatic;
+
+        @media (hover: hover) {
+            &:hover:not(:focus) {
+                box-shadow: $shadowOutlineHover;
+                transition: 0.02s box-shadow $transitionEaseOut;
+            }
+        }
+
+        &:focus {
+            box-shadow: $shadowOutlineActive;
+        }
+
+        &::placeholder {
+            @extend %text-medium;
+            font-size: 16px;
+            color: SolidColor("grey");
+        }
+
+        &.full-height {
+            height: 100%;
+        }
+
+        &.adaptive-height {
+            min-height: auto;
+        }
+
+        &.small-text {
+            font-size: 12px;
+        }
+
+        &.disabled {
+            opacity: 0.5;
+        }
+
+        &.error-encountered {
+            box-shadow: $shadowOutlineError !important;
+        }
+    }
+}

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

@@ -0,0 +1,80 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./lines-of-text.module.scss";
+
+/**
+ * Renders up to three lines of text with configurable options for horizontal layout, text wrapping, and breaking.
+ * Optionally, displays a default text content centered vertically if provided.
+ *
+ * @param {string} firstLineText - Text for the first line.
+ * @param {string} secondLineText - Text for the second line.
+ * @param {string} thirdLineText - Text for the third line.
+ * @param {boolean} isHorizontal - If true, displays the text horizontally.
+ * @param {string} defaultTextContent - Default text content to display, centered vertically.
+ * @param {boolean} isFirstLineTextReducible - If true, the first line text can be reduced.
+ * @param {string} firstLineNotReducibleSuffix - Suffix to append to the first line text if not reducible.
+ * @param {boolean} wrapFirstLine - If true, allows the first line text to wrap.
+ * @param {boolean} breakFirstLine - If true, allows the first line text to break onto the next line.
+ */
+export const LinesOfText = ({
+    firstLineText = "",
+    secondLineText = "",
+    thirdLineText = "",
+    isHorizontal = false,
+    defaultTextContent = "",
+    isFirstLineTextReducible = false,
+    firstLineNotReducibleSuffix = "",
+    wrapFirstLine = false,
+    breakFirstLine = false,
+}) => {
+    return defaultTextContent ? (
+        <div className={s["centered-vertically"]}>{defaultTextContent}</div>
+    ) : (
+        <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"] : ""
+                    }`}
+                >
+                    {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}
+        </div>
+    );
+};
+
+LinesOfText.propTypes = {
+    firstLineText: PropTypes.string,
+    secondLineText: PropTypes.string,
+    thirdLineText: PropTypes.string,
+    isHorizontal: PropTypes.bool,
+    defaultTextContent: PropTypes.string,
+    isFirstLineTextReducible: PropTypes.bool,
+    firstLineNotReducibleSuffix: PropTypes.string,
+    wrapFirstLine: PropTypes.bool,
+    breakFirstLine: PropTypes.bool,
+};
+
+LinesOfText.defaultProps = {
+    firstLineText: "",
+    secondLineText: "",
+    thirdLineText: "",
+    isHorizontal: false,
+    defaultTextContent: "",
+    isFirstLineTextReducible: false,
+    firstLineNotReducibleSuffix: "",
+    wrapFirstLine: false,
+    breakFirstLine: false,
+};

package/src/components/atoms/TwoLinesOfText/lines-of-text.module.scss

@@ -0,0 +1,62 @@
+@import "../../../../styles/index";
+
+.first-line-text {
+    display: flex;
+    font-weight: $bold;
+    white-space: nowrap;
+    // font-family: NunitoSans;
+
+    .wrap {
+        white-space: normal;
+        word-wrap: break-word;
+    }
+
+    .break {
+        word-break: break-all;
+        white-space: break-spaces;
+    }
+
+    .full-text {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: Margin("2");
+    }
+
+    .shorted {
+        word-wrap: unset;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        @media (max-width: $tablet-width) {
+            width: auto;
+        }
+    }
+}
+
+.horizontal {
+    display: flex;
+    align-items: center;
+
+    @media (max-width: $phone-width) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .line {
+        width: 20px;
+        margin: 0 Margin("3");
+        // font-family: NunitoSans;
+
+        @media (max-width: $phone-width) {
+            display: none;
+        }
+    }
+}
+
+.second-line-text {
+    color: SolidColor("grey");
+    white-space: nowrap;
+    // font-family: NunitoSans;
+}

package/src/components/molecules/LineWithIconLink/LineWithIconLink.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./line-with-icon-link.module.scss";
+
+/**
+ * Renders a line with text and an accompanying icon that serves as a link.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} props.text - Text to be displayed.
+ * @param {string} props.icon - URL of the icon image.
+ * @param {string} props.url - Target URL that the icon link points to.
+ */
+export const LineWithIconLink = ({ text, icon, url }) => {
+    return (
+        <div className={s["line-with-icon-link"]}>
+            <h5 className={s["line-with-icon-link-text"]}>{text}</h5>
+            <a
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={"line-with-icon-link-icon"}
+            >
+                <img src={icon} alt="Link Icon" />
+            </a>
+        </div>
+    );
+};
+
+LineWithIconLink.propTypes = {
+    text: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+};
+
+LineWithIconLink.defaultProps = {
+    text: "",
+    icon: "",
+    url: "",
+};

package/src/components/molecules/LineWithIconLink/line-with-icon-link.module.scss

@@ -0,0 +1,25 @@
+@import "../../../../styles/index";
+
+.line-with-icon-link {
+    display: flex;
+    align-items: center;
+    // font-family: NunitoSans;
+
+    &-text {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        font-weight: $bold;
+        margin-right: Margin("4");
+    }
+
+    &-icon {
+        @extend %hover-state;
+        display: flex;
+        align-items: center;
+
+        img {
+            width: 24px;
+        }
+    }
+}

package/src/components/organisms/Dialog/DialogStep/dialog-step.module.scss

@@ -202,7 +202,7 @@
             align-items: center;
             margin: 0 auto;
             position: relative;
-            font-family: NunitoSans;
+            // font-family: NunitoSans;
 
             &.text-left {
                 max-width: 100%;

package/src/index.js

@@ -22,6 +22,7 @@ export { NoticeIcon } from "./components/atoms/NoticeIcon/NoticeIcon.jsx";
 export { TitleBox } from "./components/atoms/TitleBox/TitleBox.jsx";
 export { AmountInput } from "./components/molecules/AmountInput/AmountInput.jsx";
 export { SwapForm } from "./components/organisms/SwapForm/SwapForm.jsx";
+export { Textarea } from "./components/atoms/Textarea/Textarea.jsx";
 
 export { useCallHandlingErrors } from "./components/hooks/useCallHandlingErrors.js";
 export { useReferredState } from "./components/hooks/useReferredState.js";

package/styles/_placeholder.scss

@@ -10,7 +10,7 @@
 }
 
 %font {
-    font-family: NunitoSans;
+    // font-family: NunitoSans;
 }
 
 %text-very-bold {

package/styles/global-styles-index.scss

@@ -39,7 +39,7 @@ html {
 
 body {
     margin: 0;
-    font-family: NunitoSans;
+    // font-family: NunitoSans;
     width: 100%;
     overflow-x: hidden;
     overflow-y: auto;