@rabbitio/ui-kit 1.0.0-beta.43 → 1.0.0-beta.45

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.43",
+    "version": "1.0.0-beta.45",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -41,12 +41,17 @@
         "react-dom": ">=18.2.0"
     },
     "dependencies": {
+        "animated-scroll-to": "2.3.0",
         "axios": "1.6.7",
         "bignumber.js": "9.1.2",
+        "body-scroll-lock": "3.1.5",
         "eventbusjs": "0.2.0",
         "jshashes": "1.0.8",
         "react": ">=18.2.0",
+        "react-animate-height": "3.2.3",
         "react-dom": ">=18.2.0",
+        "react-transition-group": "4.4.5",
+        "resize-observer-polyfill": "1.5.1",
         "uuid": "9.0.0"
     },
     "devDependencies": {

package/src/assets/image/icons/arrow-tosca.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2431 6L8.00045 10.2426L3.75781 6" stroke="#16CDD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/image/icons/arrow-white.svg

@@ -0,0 +1,14 @@
+<svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+            d="M12.2431 6L8.00045 10.2426L3.75781 6"
+            stroke="#fff" stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+    />
+</svg>

package/src/assets/image/icons/failed-validation-icon.svg

@@ -0,0 +1,15 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.8" x="1.5" y="1.5" width="24" height="24" rx="12" fill="#DAF1FE"/>
+<path d="M12.3259 10.5855C12.2575 9.8896 12.8063 9.28745 13.5055 9.29121C14.2008 9.29495 14.7418 9.8964 14.6722 10.5881L14.1937 15.3431C14.1575 15.7026 13.855 15.9762 13.4937 15.9762C13.1319 15.9762 12.829 15.7017 12.7936 15.3415L12.3259 10.5855Z" fill="url(#paint0_linear)"/>
+<path d="M13.514 17.1182C14.1325 17.1182 14.634 17.6196 14.634 18.2382C14.634 18.8567 14.1325 19.3582 13.514 19.3582H13.486C12.8674 19.3582 12.366 18.8567 12.366 18.2382C12.366 17.6196 12.8674 17.1182 13.486 17.1182H13.514Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="17.3456" y1="14.0483" x2="11.6522" y2="12.8896" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55E7D9"/>
+<stop offset="1" stop-color="#54B4FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="17.3456" y1="14.2383" x2="11.6522" y2="13.0796" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55E7D9"/>
+<stop offset="1" stop-color="#54B4FF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/image/icons/successful-validation-icon.svg

@@ -0,0 +1,10 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.8" x="1.5" y="1.5" width="24" height="24" rx="12" fill="#DAF1FE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8703 15.7837L9.64348 13.5569C9.30357 13.217 8.75246 13.217 8.41255 13.5569C8.07264 13.8968 8.07264 14.4479 8.41255 14.7878L11.2351 17.6104C11.5672 17.9425 12.103 17.9512 12.4457 17.6301L18.4492 12.0049C18.8 11.6762 18.8179 11.1254 18.4892 10.7746C18.1605 10.4238 17.6097 10.4059 17.2589 10.7346L11.8703 15.7837Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="19.8333" y1="18.9098" x2="15.586" y2="7.2736" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55E7D9"/>
+<stop offset="1" stop-color="#54B4FF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/atoms/BackgroundTitle/BackgroundTitle.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./background-title.module.scss";
+
+/**
+ * Component for displaying a title with a fancy background text, which
+ * is semi-visible. This component is designed to work with forms that
+ * have a white background, and it allows for a configuration of margins.
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.text - Text to be displayed as the title
+ * @param {boolean} [props.smallMargins=false] - Whether to use smaller margins around the title
+ */
+export const BackgroundTitle = ({ text, smallMargins = false }) => {
+    return (
+        <div className={s["background-title"]}>
+            <div
+                className={
+                    s["background-title-wrapper"] +
+                    (smallMargins ? " " + s["small-margins"] : "")
+                }
+            >
+                <div
+                    className={
+                        s["background-title-wrapper-text"] +
+                        (smallMargins ? " " + s["small-margins"] : "")
+                    }
+                >
+                    {text}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+BackgroundTitle.propTypes = {
+    text: PropTypes.string.isRequired,
+    smallMargins: PropTypes.bool,
+};
+
+BackgroundTitle.defaultProps = {
+    smallMargins: false,
+};

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

@@ -0,0 +1,52 @@
+@import "../../../../styles/index";
+
+.background-title {
+    pointer-events: none;
+    user-select: none;
+    position: relative;
+    width: 200%;
+    font-family: NunitoSans;
+
+    &-wrapper {
+        position: absolute;
+        overflow-x: hidden;
+        width: 200%;
+        height: 90px;
+        top: 0;
+        left: 0;
+
+        @media (max-width: $phone-width) {
+            font-size: 30px;
+            line-height: 50px;
+            letter-spacing: 0.76875px;
+        }
+
+        &.small-margins {
+            top: 15px;
+            left: 19px;
+        }
+
+        &-text {
+            position: absolute;
+            top: 0;
+            left: 0;
+            font-size: 50px;
+            line-height: 50px;
+            font-weight: $extra-bold;
+            letter-spacing: 1.23px;
+            color: rgba(#12316b, 0.05);
+
+            &.small-margins {
+                font-size: 30px;
+                line-height: 50px;
+                letter-spacing: 0.76875px;
+            }
+
+            @media (max-width: $phone-width) {
+                font-size: 30px;
+                line-height: 40px;
+                letter-spacing: 0.76875px;
+            }
+        }
+    }
+}

package/src/components/atoms/Validation/Validation.jsx

@@ -0,0 +1,130 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./validation.module.scss";
+// import successfulValidationIcon from "../../../assets/image/icons/successful-validation-icon.svg";
+// import failedValidationIcon from "../../../assets/image/icons/failed-validation-icon.svg";
+
+const SuccessfulValidationIcon = () => (
+    <svg
+        width="27"
+        height="27"
+        viewBox="0 0 27 27"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <rect
+            opacity="0.8"
+            x="1.5"
+            y="1.5"
+            width="24"
+            height="24"
+            rx="12"
+            fill="#DAF1FE"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.8703 15.7837L9.64348 13.5569C9.30357 13.217 8.75246 13.217 8.41255 13.5569C8.07264 13.8968 8.07264 14.4479 8.41255 14.7878L11.2351 17.6104C11.5672 17.9425 12.103 17.9512 12.4457 17.6301L18.4492 12.0049C18.8 11.6762 18.8179 11.1254 18.4892 10.7746C18.1605 10.4238 17.6097 10.4059 17.2589 10.7346L11.8703 15.7837Z"
+            fill="url(#paint0_linear)"
+        />
+        <defs>
+            <linearGradient
+                id="paint0_linear"
+                x1="19.8333"
+                y1="18.9098"
+                x2="15.586"
+                y2="7.2736"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);
+
+const FailedValidationIcon = () => (
+    <svg
+        width="27"
+        height="27"
+        viewBox="0 0 27 27"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <rect
+            opacity="0.8"
+            x="1.5"
+            y="1.5"
+            width="24"
+            height="24"
+            rx="12"
+            fill="#DAF1FE"
+        />
+        <path
+            d="M12.3259 10.5855C12.2575 9.8896 12.8063 9.28745 13.5055 9.29121C14.2008 9.29495 14.7418 9.8964 14.6722 10.5881L14.1937 15.3431C14.1575 15.7026 13.855 15.9762 13.4937 15.9762C13.1319 15.9762 12.829 15.7017 12.7936 15.3415L12.3259 10.5855Z"
+            fill="url(#paint0_linear)"
+        />
+        <path
+            d="M13.514 17.1182C14.1325 17.1182 14.634 17.6196 14.634 18.2382C14.634 18.8567 14.1325 19.3582 13.514 19.3582H13.486C12.8674 19.3582 12.366 18.8567 12.366 18.2382C12.366 17.6196 12.8674 17.1182 13.486 17.1182H13.514Z"
+            fill="url(#paint1_linear)"
+        />
+        <defs>
+            <linearGradient
+                id="paint0_linear"
+                x1="17.3456"
+                y1="14.0483"
+                x2="11.6522"
+                y2="12.8896"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+            <linearGradient
+                id="paint1_linear"
+                x1="17.3456"
+                y1="14.2383"
+                x2="11.6522"
+                y2="13.0796"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);
+
+/**
+ * Simple validation message with an icon.
+ * It shows either a success or failure icon based on the isSuccessAlert prop.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.text - The validation message text to display.
+ * @param {boolean} props.isSuccessAlert - Determines if the displayed alert is for a success (true) or failure (false).
+ */
+export const Validation = ({ text = "", isSuccessAlert }) => {
+    return (
+        <div className={s["validation"]}>
+            {isSuccessAlert ? (
+                // <img src={successfulValidationIcon} alt="validation icon" />
+                <SuccessfulValidationIcon />
+            ) : (
+                // <img src={failedValidationIcon} alt="validation icon" />
+                <FailedValidationIcon />
+            )}
+            <span className={s["validation-text"]}>{text}</span>
+        </div>
+    );
+};
+
+Validation.propTypes = {
+    text: PropTypes.string,
+    isSuccessAlert: PropTypes.bool.isRequired,
+};
+
+Validation.defaultProps = {
+    text: "",
+    isSuccessAlert: false,
+};

package/src/components/atoms/Validation/validation.module.scss

@@ -0,0 +1,15 @@
+@import "../../../../styles/index";
+
+.validation {
+    display: flex;
+    align-items: center;
+    margin-top: Margin("3");
+
+    &-text {
+        text-align: left;
+        color: SolidColor("sky");
+        @extend .ml-2;
+        font-size: 14px;
+        @extend %text-semibold;
+    }
+}

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

@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./close.module.scss";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors";
+
+export const CLOSE_COLORS = {
+    WHITE: "white",
+    DARK: "dark",
+    DARK_INVERT: "dark-invert",
+};
+
+/**
+ * A component for rendering a close icon that handles errors on click.
+ * This component uses an SVG to render the icon and allows customization
+ * through props for color, size, and the click event handling.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {string} props.color - The color theme of the close icon.
+ *   Should be one of the properties of CLOSE_COLORS.
+ * @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,
+}) => {
+    const callHandlingErrors = useCallHandlingErrors();
+
+    return (
+        <svg
+            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`}
+            x="0px"
+            y="0px"
+        >
+            <path
+                d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
+                c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
+                C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
+                s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"
+            />
+        </svg>
+    );
+};
+
+Close.propTypes = {
+    color: PropTypes.oneOf(Object.values(CLOSE_COLORS)),
+    onClick: PropTypes.func,
+    large: PropTypes.bool,
+};
+
+Close.defaultProps = {
+    color: CLOSE_COLORS.WHITE,
+    onClick: () => {},
+    large: false,
+};

package/src/components/atoms/buttons/Close/close.module.scss

@@ -0,0 +1,75 @@
+@import "../../../../../styles/index";
+
+.close {
+    width: 24px;
+    height: 24px;
+    padding: 6px;
+    border-radius: 100%;
+    background-color: LightColor("grey-20");
+    opacity: 0.5;
+    transition: 0.2s all ease;
+    cursor: pointer;
+    box-sizing: border-box;
+
+    &.large {
+        width: 48px;
+        height: 48px;
+        padding: 16px;
+
+        @media (max-width: $tablet-width) {
+            width: 36px;
+            height: 36px;
+            padding: 12px;
+        }
+    }
+
+    &.white {
+        path {
+            fill: white;
+            background-color: none;
+        }
+    }
+
+    &.dark-invert {
+        opacity: 0.5;
+        background-color: SolidColor("grey");
+
+        @media (hover: hover) {
+            &:hover {
+                opacity: 1;
+                transition: opacity 0.03s ease;
+            }
+        }
+
+        &:active {
+            opacity: 1;
+            transition: opacity 0.03s ease;
+        }
+
+        path {
+            fill: SolidColor("lightsmoke");
+        }
+    }
+
+    &.dark {
+        box-shadow: $shadowOutlineStatic;
+
+        @media (hover: hover) {
+            &:hover {
+                opacity: 1;
+                transition: opacity 0.03s ease;
+                box-shadow: $shadowOutlineHover;
+            }
+        }
+
+        &:active {
+            opacity: 1;
+            transition: opacity 0.03s ease;
+            box-shadow: $shadowOutlineHover;
+        }
+
+        path {
+            fill: SolidColor("darkBlue");
+        }
+    }
+}

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

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors";
+
+import s from "./link-button.module.scss";
+import { LoadingDots } from "../../LoadingDots/LoadingDots";
+
+export const iconRotateOptions = {
+    rotate0: "0deg",
+    rotate90: "90deg",
+    rotate180: "180deg",
+    rotate270: "270deg",
+};
+
+/**
+ * LinkButton renders a clickable button which can optionally display an icon and loading animation.
+ * It can also be styled to be colored or disabled. This button supports rotating the icon according to specified degrees.
+ *
+ * @component
+ * @param {Object} props - Properties passed down to the component.
+ * @param {Function} props.onClick - Callback function triggered on button click. It should handle any post-click logic like resetting loading state.
+ * @param {boolean} props.isDisabled - If true, the button will be disabled and non-interactable.
+ * @param {boolean} props.isLoadable - If true, the button will display a loading indicator upon being clicked.
+ * @param {string} props.content - Text content displayed on the button.
+ * @param {boolean} props.isColored - If true, applies additional styling to the button.
+ * @param {string} props.icon - URL of an icon image to be displayed on the button.
+ * @param {string} props.iconRotate - Rotation angle for the icon. Valid values are defined in `iconRotateOptions`.
+ * @param {Object} props.IconComponent - Icon component, if SVG is imported directly.
+ *
+ * @returns {JSX.Element} A React component that renders a clickable and optionally loadable and icon-displaying button.
+ */
+export const LinkButton = ({
+    onClick = (resetButtonLoader) => {},
+    isDisabled = false,
+    isLoadable = false,
+    content = "",
+    isColored = true,
+    icon,
+    iconRotate,
+    IconComponent,
+}) => {
+    const callHandlingErrors = useCallHandlingErrors();
+
+    const [isLoading, setIsLoading] = useState(false);
+    const [processedIconRotation, setProcessedIconRotation] = useState(null);
+
+    const handleClick = () => {
+        callHandlingErrors(() => {
+            if (!isDisabled) {
+                if (isLoadable) {
+                    setIsLoading(true);
+                }
+                // TODO: [bug, moderate] Click can be called when there isLoading=true task_id=a15979a4ca2042b29dfd1d128a16c281
+                onClick(() => setIsLoading(false));
+            }
+        });
+    };
+
+    useEffect(() => {
+        if (
+            iconRotate &&
+            Object.keys(iconRotateOptions).find(
+                (key) => iconRotateOptions[key] === iconRotate
+            )
+        )
+            setProcessedIconRotation(iconRotate);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [iconRotate]);
+
+    return isLoading ? (
+        <LoadingDots isColored={true} />
+    ) : (
+        <div
+            className={
+                s["link-button"] +
+                ` ${
+                    processedIconRotation &&
+                    processedIconRotation !== iconRotateOptions.rotate0
+                        ? " " + s["icon-rotate-" + processedIconRotation]
+                        : ""
+                } ${isDisabled ? " " + s["disabled"] : ""}`
+            }
+            onClick={handleClick}
+        >
+            {icon ? <img src={icon} alt="link button alt" /> : null}
+            {IconComponent ? <IconComponent /> : null}
+            <p
+                className={
+                    s["link-button-text"] +
+                    ` ${isColored ? s["colored"] : ""} ${
+                        isDisabled ? s["disabled"] : ""
+                    }`
+                }
+            >
+                {content}
+            </p>
+        </div>
+    );
+};
+
+LinkButton.propTypes = {
+    onClick: PropTypes.func,
+    isDisabled: PropTypes.bool,
+    isLoadable: PropTypes.bool,
+    content: PropTypes.string,
+    icon: PropTypes.string,
+    isColored: PropTypes.bool,
+    iconRotate: PropTypes.oneOf(Object.values(iconRotateOptions)),
+    IconComponent: PropTypes.elementType,
+};
+
+LinkButton.defaultProps = {
+    onClick: (resetButtonLoader) => {},
+    isDisabled: false,
+    isLoadable: false,
+    content: "",
+    icon: undefined,
+    isColored: true,
+    iconRotate: iconRotateOptions.rotate0,
+};

package/src/components/atoms/buttons/LinkButton/link-button.module.scss

@@ -0,0 +1,45 @@
+@import "../../../../../styles/index";
+
+.link-button {
+    display: flex;
+    align-items: center;
+
+    &:not(.disabled) {
+        @extend %hover-state;
+    }
+
+    &.icon-rotate-90deg img {
+        transform: rotate(90deg);
+    }
+    &.icon-rotate-180deg img {
+        transform: rotate(180deg);
+    }
+    &.icon-rotate-270deg img {
+        transform: rotate(270deg);
+    }
+
+    img {
+        margin-left: -3px;
+        margin-right: Margin("1");
+    }
+
+    &-text {
+        @extend %text-bold;
+        font-size: 14px;
+        color: $white;
+        text-decoration: none;
+        text-align: center;
+        line-height: 14px;
+        // padding-bottom: 1px;
+        margin: 0;
+
+        &.colored {
+            color: SolidColor("tosca");
+        }
+
+        &.disabled {
+            color: SolidColor("grey");
+            cursor: default;
+        }
+    }
+}